vue项目video视频播放多种实现方式

Posted 2023-04-11

参考技术A 一、vue-video-player

安装
npm i vue-video-player
引入

index.vue

二、原生video标签播放文件,除了样式丑点没啥毛病

index.vue

三、video.js插件

1、先安装video.js...

index.vue

Video.js组件在Vue项目中的综合使用详解（多个视频+倍速播放）

Video.js —— 一款开源且功能丰富的web视频组件

Video.js在Vue项目中的综合使用详解（多个视频+倍速播放）

开发中，使用video标签自带的属性难以达到我们实际所需要的效果；例如视频的倍速播放功能，利用原生代码重写一个视频标签又太过于繁琐（PS:主要是懒）。在这里，向大家推荐一款很好用的组件video.js，这是一个开源的web视频组件(video.js官网)，其使用基于html5的video标签，同时支持HTML和Flash视频，下面向大家详细介绍一下在Vue项目中的使用，希望能帮助大家~

第一步：npm安装video.js

如果利用npm命令安装失败，可以利用淘宝镜像安装（不知道淘宝镜像的安装及使用，可自行百度，参考文章很多），具体安装命令为cnmp install video.js，如果一次不行，多试几次（PS: 安装这些东西有时候真的看人品啊啊），我当时安装时第一次报错，第二次成功了。

第二步：在main.js中引入video.js

将video.js注册到原型上

import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video

第三步：在页面中的具体使用

这边向大家分享有多个视频标签，利用video.js实现倍速播放功能。
首先先上一张效果图

在data中声明ids: [] 和 myPlayer: []变量，在这里不做过多展示。

首先创建video标签
这里介绍一下动态创建video标签的方式，稍微会麻烦一点，如果是非动态创建的video标签会更简单（由于涉及到多个视频，这里对每个video标签动态生成了唯一的id值，生成的id在初始化方法中将作为参数传入）

注意：创建的video标签不能够对其进行任何属性及样式操作，否则在调用getVideo()标签初始化时会有警告提示当前的video标签已经被初始化过了，你的操作就不会生效。

上代码！

    // 插入的视频内容格式处理
    updateVideo(result) 
      // 插入内容
      const _videos = []
      result.map(item => 
        _videos.push(
          `<div class="ck-media__wrapper"><video id="myVideo$Math.random()
            .toString(36)
            .substr(2) + Date.now()" class="video-js"><source src="$
            item.attachUrl
          " style=" width: 100%;height: 100%; type="video/mp4"></video></div>`
        )
      )
      this.docInfo.content += _videos.join('')
    ,

然后创建getVideo()的方法
实现对video标签的操作，利用循环来初始化每个video标签。

上代码！

getVideo() 
      for (let i = 0; i < this.ids.length; i++) 
        this.myPlayer[i] = this.$video(
          this.ids[i], //每个video标签对应的id
          
            controls: true,
            autoplay: false,
            preload: false,
            fluid: true, // 自适应宽高
            controlBar: 
              // 设置控制条组件
              currentTimeDisplay: true,
              timeDivider: true,
              durationDisplay: true,
              remainingTimeDisplay: false,
              volumePanel: 
                inline: false
              ,
              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'  // 全屏
              ]
            
          ,
          function() 
            this.play() // 自动播放
          
        )
      
    

接下来该在哪里来调用getVideo()方法呢？
这个当然要根据具体的项目开发情况而定啦，由于我现在所在项目中的video标签是根据后端返回数据进行动态渲染的，所以我用了watch监听来决定什么时候调用getVideo()方法。

上代码！

watch: 
    'docInfo.content': 
      handler(nVal, oVal) 
        let videoArr = []
        if (nVal && nVal !== oVal) 
          this.$nextTick(() => 
            // 通过window.document.querySelectorAll('video')获取所有的video标签
            videoArr = window.document.querySelectorAll('video')
            // 如果存在video标签
            if (videoArr && videoArr.length > 0) 
              this.ids = []
              // 循环遍历所有video标签
              for (let i = 0; i < videoArr.length; i++) 
                // 将每个video对应的id存入ids数组中，以便后面将id作为参数传入到初始化方法中
                this.ids.push(window.document.querySelectorAll('video')[i].getAttribute('id'))
                if (this.ids && this.ids.length > 0) 
                  // 调用初始化video方法，对video标签进行操作
                  this.getVideo()
                
              
            
          )
        
      ,
      deep: true
    
  ,

这里监听的对象是docInfo.content，这个对象用于接收接口返回的数据。
当监听到内容有变化时，就获取当前内容是否含有video标签，如果有，通过循环遍历获取到每个video标签的id（为什么要获取id呢，是因为用video.js初始化video标签时传入的第一个参数必须是id），如果id存在则调用getVideo()方法对当前id的video标签进行操作。

最后，利用dispose()方法销毁已经初始化后的video标签。
不销毁会怎么样？
会出现警告VIDEOJS: WARN: Player “myVideo449olbdpe” is already initialised. Options will not be applied.
警告原因是什么？
当第一次初始化完某一个video标签，第二次再次调用getVideo()方法对这个video标签进行初始化时，出现警告，意思是id为myVideo449olbdpe这个video标签已经被初始化了，其他操作将不会被应用，也就是说你第二次对这个标签初始化会不生效。

上代码！

for (let i = 0; i < this.ids.length; i++) 
        this.myPlayer[i].dispose()
      

写在最后

网上关于video.js在vue项目中使用的介绍不太多，使用过程中很容易遇坑，尤其是对于利用video.js对多个视频进行操作的技术博客更少，因此给大家总结了自己在项目开发中遇到的一些问题及解决经验，其中需要注意的点都已经在文章中注明了，希望能够帮助到大家，如有不足请多多指教。