Vue2+video.js实现视频在弹窗中播放及切换

视频采集和管理是多模态大数据应用场景必不可少的环节，在基于Vue2前端框架实现的Web界面如何进行视频的展示和播放是开发人员会遇到的一个主要技术问题。本文提供基于Vue2+video.js实现视频的预览的方案。

采集的视频数据在前端视频管理模块列表中展示，然后用弹窗查看视频详情并预览播放。最开始使用 vue-mini-player 组件，可轻松实现视频在编辑界面的弹窗中播放，但是遇到两个问题：1）弹窗中播放着视频，关闭窗口后，视频流不会停止。2）关闭窗口，重新打开新的视频编辑窗口后，依旧是继续播放之前的视频。其原因应该是关闭旧的窗口后，视频播放的控件没有销毁，导致新打开的控件其实还是旧控件的实例。查了很多关于vue-mini-player的文档和使用样例，没有找到如何销毁vue-mini-player控件。

video.js 是一个通用的可嵌入网页的视频播放器JS库，在Vue2中引用video.js可以创建播放组件对象，关闭视频时能进行操作。基于Vue2使用video.js方法如下。

1. 安装video.js：

npm install video.js@6.13.0

2. main.js注册

import videoJs from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.videoJs = videoJs //注册

3. vue代码文件中使用组件

创建<video>组件，可放在弹窗中任何需要的地方。重点是给出id值，设置属性时需要用到。

<template>
  <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <video id="casvideoplayer" ref="videoPlayerRef" class="video-js">
          <source :src="playUrl" type="video/mp4">
      </video>
      ...
      <div slot="footer" class="dialog-footer">
        	<el-button type="primary" @click="submitForm">确 定</el-button>
        	<el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
</template>

export default {
data() {
    return {
    // 使用video.js播放视频配置
    videoJsPlayer: null,
    playUrl:"", 			//视频文件链接
    videoPlayerOption: {
        controls: true, 			//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        // url: "", 							//要嵌入的视频资源url（不起作用？）
        poster: '',   					//封面
         autoplay: false, 	//自动播放属性, true/false/"muted"(静音播放)
        muted: false, 				//静音播放
        preload: 'none', 		//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        fluid: false, 					//是否自适应布局,播放器将会有流体体积。换句话说，它将缩放以适应容器。
        width: "850px", 		//视频播放器的显示宽度（以像素为单位）（fluid=false时起作用）
        height: "600px", 		//视频播放器的显示高度（以像素为单位）（fluid=false时起作用）
     },
};

methods: {
   // 视频列表的“修改”按钮，点击后显示修改弹窗
   handleUpdate(row) {
        // 从后台获取视频信息
        getVedio(row.id).then(response => {
            this.form = response.data;    //修改弹窗其他字段信息赋值
            this.title = "修改视频管理";
            this.open = true;    								// 显示修改弹窗

            // video.js组件播放视频
            this.videoPlayerOption.poster = response.data.avator;
            this.playUrl = response.data.contentsOrg;
            this.showVideoWindow();   //设置视频播放控件
        });
     },
       
    //（重点是这里）
    // 使用video.js组件播放视频
     showVideoWindow(){
        // 如果视频播放控件已经存在，切换视频url，重新播放；如果控件不存在，创建
        if(this.videoJsPlayer){
            this.videoJsPlayer.src([
                 {
                    src: this.playUrl,
                    type: "video/mp4"
                 }
             ]);
            // 如何图片不为空，设置视频封面
            if(this.videoPlayerOption.poster != null && this.videoPlayerOption.poster != ""){
            		this.videoJsPlayer.poster(this.videoPlayerOption.poster);
             }
            this.videoJsPlayer.load(this.playUrl);
            // this.videoJsPlayer.play();      //自动播放（打开后，切换视频后需自动播放）
         }else{
            // 最开始创建一次视频播放组件
            this.$nextTick(() => {
                this.videoJsPlayer = this.videoJs(
                    "casvideoplayer", 				//播放器控件id
                    this.videoPlayerOption //播放器设置项（这里设置的poster属性不生效，需要在后面单独设置）
                 );
                this.videoJsPlayer.poster(this.videoPlayerOption.poster);  //貌似不生效？
             })
         }
     },
       
    // 编辑弹窗页面的“取消”按钮
    cancel() {
        // 重置视频控件数据（video.js组件）
        if(this.videoJsPlayer){
            this.videoJsPlayer.reset();
         }
					this.reset();
 		},
｝

以上代码实现了在Vue2弹窗中播放视频组件的功能，注意关闭弹窗时要使用“取消”按钮。如果通过点击弹窗右上角X关闭弹窗，视频还可以在后台继续播放，但是打开一个新的视频修改弹窗后，播放的视频会终止，并切换到新视频播放界面。即使这样，目前的功能已经不影响用户正常使用。

video.js还有一个强大功能，看到喜欢的画面点击右键可以保存视频帧，另外支持画中画、设备投放等功能。

后续优化改进工作包括：1）把video.js视频播放功能做成Vue组件，方便在不同的Vue代码文件中调用。2）捕获窗口关闭的事件（如点击X关闭，或者鼠标失焦点后关闭），关闭视频流。

【参考材料】

video.js官方网站：https://videojs.com/

其他编码材料：

https://blog.csdn.net/qq_60533482/article/details/128015308

https://blog.csdn.net/Uookic/article/details/116131535

https://www.cnblogs.com/DL-CODER/p/16833222.html