vue播放flv、hls(m3u8)视频及动态切换视频流

【了解video.js】

官方地址: https://github.com/videojs/video.js

【用法】

1、安装

npm install video.js --save  
npm install videojs-flash --save //rtmp格式
//flv格式
npm install flv.js --save
npm install videojs-flvjs-es6 --save
//hls格式  video.js7.0以后版本默认支持hls（m3u8）格式  可以不安装，装了也可以使用
npm install videojs-contrib-hls --save

2、引用

import Videojs from 'video.js'
import 'video.js/dist/video-js.css'
import "videojs-flvjs-es6";
import "videojs-flash";

3、使用

// 标签容器
<video
    id="mmiid"
    class="video-js vjs-big-play-centered vjs-fluid"
    controls
    preload="auto"
    width="100%"
    height="100%"
    >
</video>

// hls(m3u8)格式
this.videoPlayer = Videojs(document.querySelector('#mmiid'), // 挂载容器
        {
          autoplay: 'muted',//自动播放
          controls: true,//用户可以与之交互的控件
          loop:true,//视频一结束就重新开始
          muted:false,//默认情况下将使所有音频静音
          aspectRatio:"16:9",//显示比率
          fullscreen:{
              options: {navigationUI: 'hide'}
          },
          techOrder: ["html5", "flvjs"],// 兼容顺序
          html5:{hls: {
              withCredentials: true
          }},
          sources: [{ src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8', 
                      type: "application/x-mpegURL" }], // 视频地址 类型
         })

//flv
this.videoPlayer = Videojs(document.querySelector('#mmiid'),{
       autoplay: 'muted',//自动播放
        controls: true,//用户可以与之交互的控件
        loop:true,//视频一结束就重新开始
        muted:false,//默认情况下将使所有音频静音
        aspectRatio:"16:9",//显示比率
        fullscreen:{
            options: {navigationUI: 'hide'}
        },
        techOrder: ["html5", "flvjs"],// 兼容顺序
        flvjs: {
            mediaDataSource: {
                isLive: false,
                cors: true,
                withCredentials: false
            }
        },
        sources: [{ src: 'http://1011.hlsplay.aodianyun.com/demo/game.flv', 
                    type: "video/x-flv" }]
    })

【动态切换视频流】

起因： 需要动态切换视频流，但是换了地址后，视频无法播放，使用的代码如下。（失败方案）

//重置video的src
this.player.src(url);
//使video重新加载
this.player.load();

解决方案： 切换地址的时候，先将播放器销毁，然后添加新的dom，在重新初始化播放器就可以了。

disposeVideoJS.dispose()// 销毁之前播放
document.getElementById('#box')!.innerHTML = `<video
                                    id="${新id}"
                                    class="video-js vjs-big-play-centered vjs-fluid"
                                    controls
                                    preload="auto"
                                    width="100%"
                                    height="100%"
                                ></video>`
nextTick(() => {
        initVideo()// 重新初始化
})

 【样式调整】

<style>
.vjs-control-bar {
    font-size: 2em !important;// 控制面板整体大小调整
}
video {
    object-fit: fill !important;// 解决视频内容未铺满容器的问题
}
</style>