在 Vuejs 组件中使用 videojs-vr

Question

我正在尝试在 Vuejs 组件中使用通过 npm 安装的 videojs-vr。并得到一个错误：

TypeError: videojs is not a function
at VueComponent.mounted (VR.vue?d2da:23)
at callHook (vue.esm.js?65d7:2701)
at Object.insert (vue.esm.js?65d7:3588)
at invokeInsertHook (vue.esm.js?65d7:5541)
at VueComponent.patch [as __patch__] (vue.esm.js?65d7:5744)
at VueComponent.Vue._update (vue.esm.js?65d7:2460)

我试过导入或需要库。我使用 npm 库的方式肯定有问题。请帮忙。

<template>
  <div class="videojs-vr" style="width: 100%; height:100%;">
    <video id="videojs-vr-player" class="video-js vjs-default-skin" controls>
      <source src="./static/videos/sample.mp4" type="video/mp4">
    </video>
  </div>
</template>
<script>
var videojs = require('videojs-vr');
// import videojs from 'videojs-vr';

export default {
  name: 'videojs-vr',
  mounted() {
    var player = videojs('videojs-vr-player');
    player.mediainfo = player.mediainfo || {};
    player.mediainfo.projection = '360';
    // AUTO is the default and looks at mediainfo
    player.vr({projection: 'AUTO', debug: true, forceCardboard: false});
  },   
};
</script>

Answer 1

您需要首先要求 video.js 模块并将该引用设置为 videojs 变量。然后，您只需要 videojs-vr 模块而不将其设置为任何变量。

Here's the example from the documentation:

var videojs = require('video.js');

// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require('videojs-vr');

var player = videojs('my-video');

player.vr({projection: '360'});

在 Vuejs 组件中使用 videojs-vr

Use videojs-vr in Vuejs component

javascript

npm

video.js

vue.js