Vue 使用 Video.js

小鱼儿 2022-09-04 02:56 366阅读 0赞

一、安装

$ npm install video.js

二、main.js全局引入

// 引入video.js
     
    import Videojs from 'video.js'
     
    import 'video.js/dist/video-js.css'
     
    Vue.prototype.$video = Videojs

三、组件中的使用

// 该方法在 methods 中定义，在获取到数据后调用，index 为组件中绑定的动态 id；url 为视频地址
    initVideo(index,url) { 
      this.$nextTick(() => { 
        let myPlayer = this.$video(document.getElementById(`${ index}`), { 
          controls: true,
          //自动播放属性,muted:静音播放
          autoplay: false,
          //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: "auto",
          //设置视频播放器的显示宽度（以像素为单位）
          // width: "800px",
          //设置视频播放器的显示高度（以像素为单位）
          // height: "400px",
          playbackRates: [0.5, 1, 1.5, 2, 3],// 倍速播放
          controlBar: { 
            playToggle:true
          },
        });
        myPlayer.src(url); // 重新初始化URL
        // myPlayer.load(url); //重新加载
      })
    },

// 设置视频宽度和高度，注意不要再标签上写 style，会导致全屏无效
    <style lang="less" scoped>
    .video_box { 
      margin: 10px;
      width: 580px;
      height: 328px;
    }
    .video-js { 
      width: 580px;
      height: 328px;
    }
    </style>

四、自定义按钮位置

initVideo(index,url) { 
      this.$nextTick(() => { 
        let myPlayer = this.$video(document.getElementById(`${ index}`), { 
          controls: true, // 是否显示控制条
          // poster: 'xxx', // 视频封面图地址
          preload: 'auto',
          autoplay: false,
          fluid: true, // 自适应宽高
          language: 'zh-CN', // 设置语言
          muted: false, // 是否静音
          inactivityTimeout: false,
          playbackRates: [0.5, 1, 1.5, 2, 3],// 倍速播放
          controlBar: { 
            // 自定义按钮的位置
            children: [
              { name: 'playToggle'}, // 播放按钮
              { name: 'currentTimeDisplay'}, // 当前已播放时间
              { name: 'progressControl'}, // 播放进度条
              { name: 'durationDisplay'}, // 总时间
              {  // 倍数播放
                name: 'playbackRateMenuButton',
                'playbackRates': [0.5, 1, 1.5, 2, 2.5]
              },
              { 
                name: 'volumePanel', // 音量控制
                inline: false, // 不使用水平方式
              },
              { name: 'FullscreenToggle'} // 全屏
              // { 
              // name: "pictureInPictureToggle" //画中画播放模式
              // },
            ]
          },
        });
        myPlayer.src(url); // 重新初始化URL
        // myPlayer.load(url); //重新加载
      })
    },