Question

有人知道如何在video.js中插入360度旋转的视频

我在此主题上发现的唯一东西是 https://github.com/yanwsh/videojs-panorama 我可以写这段代码

<!DOCTYPE html>
        <html>

            <head>
                <meta charset="UTF-8"/>
                <title>Название страницы</title>

            <link rel = "stylesheet" href = "skript/video-js.min.css" />
            <script src = "skript/video.min.js"> </script>
            <script src="skript2/three.min.js"></script>
            <link href="skript2/videojs-panorama.min.css" rel="stylesheet">
            <script src="skript2/videojs-panorama.v5.min.js"></script>
            <script>


var options = {
  plugins: {
    panorama: {
      clickAndDrag: true,
      clickToToggle: true,
      autoMobileOrientation: true
    }
  }
};




     var player = videojs('videojs-panorama-player', options, function () {

});

 player.panorama({
    clickToToggle: true,
    PanoramaThumbnail: true,
    KeyboardControl: true,
    backToHorizonCenter: false,
    backToVerticalCenter: false,
    clickAndDrag: true,
    autoplay: true,
    initFov: 70,
    maxFov: 70,
    minFov: 70,
    mobileVibrationValue:0.032,
    autoMobileOrientation: true,
    VREnable: true,
    NoticeMessage: (isMobile()) ? "drag and drop video text",
    callback: function () {
        if (!isMobile()) player.pause();
    }
});

    </script>


            </head> 
        <body>
        <video
        id="videojs-panorama-player"
        crossorigin="anonymous"
          class="video-js"
          controls
          preload="auto"
          width="640"
          height="264"
          data-setup='{}'>
          <source src="1.mp4" type="video/mp4">

          </video>



          <video
          id="videojs-panorama-player"
      class="video-js"
      controls
      preload="auto"
      width="640"
      height="264"
      data-setup='{}'>
      <source src="https://yanwsh.github.io/videojs-panorama/assets/shark.mp4" type="video/mp4">


      </video>

        </body>


        </html>

但不起作用

未捕获的SyntaxError：意外的令牌2index.html：1 NoticeMessage：（isMobile（））吗？ “拖放视频文本”，

或

未捕获的TypeError：提供的元素或ID无效。（videojs）在videojs（video.js：21690）在index.html：47

请告诉我我做错了什么

奇怪的是，一切都可以在网站上运行

https://codepen.io/zeni-agentt/pen/JeLqGN

但是在localhost上会出错

Answer 1

您必须先定义播放器，然后player.panorama才能工作，如下所示：

var player = videojs('videojs-panorama-player', options, function () {

});

 player.panorama({
    clickToToggle: true,
    PanoramaThumbnail: true,
    KeyboardControl: true,
    backToHorizonCenter: false,
    backToVerticalCenter: false,
    clickAndDrag: true,
    autoplay: true,
    initFov: 70,
    maxFov: 70,
    minFov: 70,
    mobileVibrationValue:0.032,
    autoMobileOrientation: true,
    VREnable: true,
    NoticeMessage: (isMobile()) ? "drag and drop video text",
    callback: function () {
        if (!isMobile()) player.pause();
    }
});

options是一个对象，您可以在其中添加一些配置

如何将360视频插入video.js

1 个答案: