vue+video.js实现前端视频流（hls、MP4、flv）

前言

之前、写过关于西瓜播放器xgplayer可以实现各种视频流的前端直播，
目前这篇关于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
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: urlList[0].url, type: "video/x-flv" }]
    })

// 其他
//rtmp
techOrder: ["html5",  "flash"],// 兼容顺序
sources: [{ src: this.videoUrl, type: "rtmp/flv" }]
// mp4
sources: [{ src: this.videoUrl, type: "video/mp4" }]

测试地址

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

RTMP直播源地址：

香港卫视：rtmp://live.hkstv.hk.lxdns.com/live/hks1
rtmp://live.hkstv.hk.lxdns.com/live/hks2
湖南卫视：rtmp://58.200.131.2:1935/livetv/hunantv
美国1：rtmp://ns8.indexforce.com/home/mystream
美国中文电视：rtmp://media3.sinovision.net:1935/live/livestream

FLV视频：

http://1011.hlsplay.aodianyun.com/demo/game.flv