VUE——nuxt.js实现腾讯云点播的视频播放

一、TencentPlayer播放器的封装

- 由于腾讯云点播的文档提供的播放器sdk的使用方法对于vue并不适用，所以参考官网提供的方法对播放器sdk做一个组件的封装，让vue能方便的使用。

- 新建一个TencentPlayer.vue，作为一个组件引用

// TencentPlayer.vue

二、将组件作为一个插件引入nuxt

- 组件需要引用腾讯云点播官网提供tcplayer.min.js的文件，用于建立起播放器的实例，但是这个js文件中使用了window、              document，nuxt使用服务端渲染时，会报错，显示没定义window或者没定义document。

- 所以，需要将nuxt关闭对该文件的服务端渲染，作为一个插件的形式引入nuxt，然后设定ssr：false即可

 

（1）在plugins文件夹建立一个tcplayer.js文件，把刚才写好的组件引进来

import Vue from 'vue'
import tcplayer from '~/components/video/TencentPlayer.vue'

Vue.component('tc-player',tcplayer)

 （2）在nuxt.config.js中引入该插件，将ssr设为false

三、在页面使用播放器组件 

- 给组件传options的参数即可，包括fileID、appID、autoplay

 

四、最后播放效果