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'});