记一次vue播放flv、hls(m3u8)视频的经历

【前言】

接到需求，需要前端能在页面上流畅播放flv，hls等各种格式的视频。

【初尝试】

查阅资料发现，主流的vue插件网上多数人推荐的是vue-video-player，demo中使用后发现不能全部满足当时的需求，主要是在播放flv视频的时候，发现了几个问题，比如视频偶尔不能正常播放，控件配置项不方便修改等等，遂放弃。

【了解video.js】

官方地址: github.com/videojs/vid…

【用法】

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" }]
    })

【测试地址】

// hls
CCTV1高清：http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8
CCTV3高清：http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8
CCTV6高清：http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8
// flv
https://sample-videos.com/video123/flv/720/big_buck_bunny_720p_1mb.flv
https://sample-videos.com/video123/flv/720/big_buck_bunny_720p_2mb.flv
https://sample-videos.com/video123/flv/720/big_buck_bunny_720p_5mb.flv
https://sample-videos.com/video123/flv/720/big_buck_bunny_720p_10mb.flv
https://sample-videos.com/video123/flv/720/big_buck_bunny_720p_20mb.flv