vue 组件中正确使用video.js,以及注意事项

注意事项:

1:初始化后要保存初始化的对象,

2:离开组件时,要销毁video对象。

3:使用element-ui组件dialog中使用video时,要在打开dialog的回调中初始化video

4:保证video对象在当前组件的生命周期中只被创建一次

 

首先安装:

npm install --save video.js
// 直播流
npm install --save videojs-contrib-hls

main.js中引入:

import Video from 'video.js'
import 'video.js/dist/video-js.css'

Vue.prototype.$video = Video

组件中使用:

// template中有关代码 :
    

// data数据

 player: null

// methods中初始化方法:

initVideo () {
      // 初始化视频方法
      if (this.showSource.type === 'video' || this.showSource.type === 'live') {
        if (this.player) {
          this.player.src({src: this.showSource.linkUrl})
          return
        }
        this.player = this.$video('myVideo', {
        // 确定播放器是否具有用户可以与之交互的控件。没有控件,启动视频播放的唯一方法是使用autoplay属性或通过Player API。
          controls: true,
          // 自动播放属性,muted:静音播放
          autoplay: 'muted',
          // 建议浏览器是否应在

 

 

你可能感兴趣的:(javascript,Vue)