前言

之前、寫過關于西瓜播放器xgplayer可以實現各種視頻流的前端直播， 目前這篇關于video.js實現直播、視頻，拓展下知識面

使用

下載相應插件

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

頁面引入

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

使用區別

// 標簽容器 <videoid="mmiid"class="video-js vjs-big-play-centered vjs-fluid"controlspreload="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

總結

以上是生活随笔為你收集整理的vue+video.js实现前端视频流（hls、MP4、flv）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。