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

标签：vueJS实现Videovue+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

1. 页面引入

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

1. 使用区别

// 标签容器
<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