video.js播放mp4格式VR视屏

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