Vue-Video-Playervideo.jsplayercomponentforVue.适用于Vue的video.js播放器组。ExampleDemoPageCDNExamplenuxt.js/ssrexamplecodeMoreExampleCodeInstallCDNVue.use(window.VueVideoPlayer)NPMnpminstallvue-video-player--saveMountmountwithglobalimportVuefrom'vue'importVueVideoPlayerfrom'vue-video-player'//需要videojsstyleimport'video.js/dist/video-js.css'//import'vue-video-player/src/custom-theme.css'Vue.use(VueVideoPlayer,/\*{options:globaldefaultoptions,events:globalvideojsevents}\*/)mountwithcomponent//requirestylesimport'video.js/dist/video-js.css'import{videoPlayer}from'vue-video-player'exportdefault{components:{videoPlayer}}mountwithssr//如果在nuxt.js/ssr中使用，只在浏览器构建环境中保留if(process.browser){constVueVideoPlayer\=require('vue-video-player/dist/ssr')Vue.use(VueVideoPlayer)}videojsextendimportvideojsfrom'video.js'//videojspluginconstPlugin\=videojs.getPlugin('plugin')classExamplePluginextendsPlugin{//something...}videojs.registerPlugin('examplePlugin',ExamplePlugin)//videojslanguagevideojs.addLanguage('es',{Pause:'Pausa',//something...})//morevideojsapi...//vuecomponent...区别（使用方法的异同）SSR和SPA的使用的唯一区别：组件工作的SPA，通过ref属性找到videojs实例。SSR通过指令工作，通过指令arg找到videojs实例。其他配置，事件相同。SPA//同样的，你也可以在组件内部引入你要使用的插件资源包//import'some-videojs-plugin'exportdefault{data(){return{playerOptions:{//videojs选项muted:true,language:'en',playbackRates:\[0.7,1.0,1.5,2.0\],sources:\[{type:"video/mp4",src:"https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen\_synd\_768k\_vp8.webm"}\],海报:"/static/images/author.jpg",}}},mounted(){console.log('thisiscurrentplayerinstanceobject',this.player)},computed:{player(){returnthis.$refs.videoPlayer.player}},methods:{//listeneventonPlayerPlay(player){//console.log('playerplay!',player)},onPlayerPause(player){//console.log('playerpause!',player)},//...播放器事件//或监听状态事件,player)//你可以用它来做一些事情...//player.\[methods\]}}}SSRexportdefault{mounted(){console.log('thisiscurrentvideojsinstanceobject',this.myVideoPlayer)}//省略与以下组件示例代码中相同的部分//...}Issuesvideojs-contrib-hls-e未定义APIcomponentapi:events:[Array,default:[]]:customvideojseventtocomponentplaysinline:[Boolean,default:false]:setplayernotfull-screeninmobiledevicecrossOrigin:[String,default:'']:将crossOrigin设置为videocustomEventName:[String,default:'statechanged']:自定义状态变化事件名称video.jsapivideo.jsoptionsvideo.jsdocsvideojspluginsvideojs-resolution-switchervideojs-contrib-hlsvideojs-youtubevideojs-vimeovideojs-hotkeysvideojs-flashvideojs-contrib-adsmoreplugins...AuthorSurmon
