标签：mediainfo mp4 vr js player VR video videojs

1. 初始化

npm install videojs-vr --save
npm install video.js --save

2. 使用

<template>
  <div>
    <video
      width="734"
      height="434"
      id="videojs"
      class="video-js vjs-default-skin"
      crossorigin="anonymous"
      controls
      playsinline
    >
      <!-- http://otaup.aiskill.komect.com/skill/RY_VR/res/%E5%A4%8D%E5%85%B4%E5%8F%B7%E9%AB%98%E9%93%81%E5%AE%89%E5%85%A8%E5%85%A8%E6%99%AF%E8%A7%86%E9%A2%91.mp4?AWSAccessKeyId=23011GA2YBECL7O214GH&Expires=1619168498&Signature=HDSRY%2Fp4Cw3UFXSgL%2FqhH8X8Aug%3D -->
      <source
        src="http://otaup.aiskill.komect.com/skill/RY_VR/res/%E9%BB%84%E5%B1%B1%E8%AE%B0.mp4?AWSAccessKeyId=23011GA2YBECL7O214GH&Expires=1619340145&Signature=Jyfh6T%2BjcvXAyZRD0kBBSAi0nSI%3D"
        id="videoVr-${contId}"
        type="video/mp4"
      />
    </video>
  </div>
</template>

<script>
import videojs from "video.js";
import videojsVr from "videojs-vr";
import "video.js/dist/video-js.css";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    var player = (window.player = videojs("videojs"));
    // player.mediainfo = player.mediainfo || {};
    // player.mediainfo.projection = "360";
    //debug 为此插件启用调试日志记录
    //使用此属性将Omnitone库对象传递给插件。请注意，Omnitone库不包含在生成文件中。
    // AUTO is the default and looks at mediainfo
    //forceCardboard 强制硬纸板按钮在所有设备上显示，即使我们认为它们不支持它
    var vr = (window.vr = player.vr({
      projection: "360",
      debug: true,
      forceCardboard: false,
    }));
  },
  methods: {},
};
</script>

<style scoped lang="scss">
</style>

3. 报three.js is not defined

• 官网问题描述 https://github.com/videojs/videojs-vr/issues/188
• 官网解决方法 https://github.com/videojs/videojs-vr/pull/238
  解决方法上面导航栏点击对话，会看到改变的代码，由于，源代码中还没有更改，所以下载源码，后改变这两个文件，然后，npm install 重新打包替换 node_modules里面 videojs-vr的dist文件，

4. 遇到的问题

• 我更改文件后，npm install的时候报错，不能安装成功，必须用node 13的版本去安装以来打包

标签：mediainfo,mp4,vr,js,player,VR,video,videojs
来源： https://blog.csdn.net/weixin_42402812/article/details/116131346

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。