在VUE3 中使用UtoVR实现全景视频播放

Vue3中配置UtoVR全景视频播放器

由于UtoVR没有支持vue的sdk，所以只能使用vue加载第三方js的方式实现。

前提：VUE加载第三方js

VUE加载第三方js通常有以下两种方式：

1. 在index.html中使用script标签引入；
2. 在vue中动态引入js；
   我使用的是动态引入js的方式，代码如下

let script = document.createElement('script');
script.type = "text/javascript";
script.src='././UtoVR/UtoVRPlayerGuide.js'; //由于utoVR的sdk不能进行打包，所以放在了pulic目录下
document.body.appendChild(script);

在mounted中引用，在unmounted中进行移除

使用UtoVR WEB sdk

在引入js后，UtoVR WEB sdk与正常html基本没有区别了，可以按照官方文档进行配置
具体代码如下：

let playerObj = null;
      /*播放器参数配置*/
      const params = {
        container: document.querySelector('#demoVideo'),
        name: "SceneViewer",
        isGyro:true,
        scenesArr: [
          //todo:注意修改视频路径，需要保证播放页面与视频属于同一域名下
          {sceneId: "v1", sceneName: "测试VR视频", sceneFilePath: './video/output.mp4', sceneType: "Video", initFov: 110, isVideoLoop: false}
        ],
        initOverCallBack: function () {
          //将播放器对象赋值给playerObj
          playerObj  = this;
        },
        //播放器不支持全景播放回调
        errorCallBack: function (e) {
          console.log("播放错误状态：" + e);
        },
        videoPlayEndCallBack: function () {
          console.log('videoPlayEndCallBack')
        }
      };
      initLoad(params)

按照这样就可以实现在vue中使用UtoVR web sdk了

UtoVR_WebSDK 官网地址
UtoVR官网 SDK下载地址
UtoVR官方 论坛地址
[UtoVR_WebSDK 配置参数和接口API列表]( http://note.youdao.com/noteshare? id=fd0b710c07ee0b207966324ec021fc89&sub=WEB8af2d89057b12289f8f8b05079f7113d)