使用video.js播放HLS、FLV、MP4。
MP4、FLV、HLS、RTMP等协协和播放器之间的支持情况，参看这里。
一、主要JS插件：
- jquery(v3.6.0)
- video.js (v7.21.0，其它版本没试) https://cdn.bootcdn.net/ajax/libs/video.js/7.21.0/video.min.js
- flv.js (v4.2.8) https://unpkg.com/flv.js/dist/flv.min.js
- screenshot.js (Last time updated at August 04, 2017, 08:32:23) https://www.webrtc-experiment.com/screenshot.js
二、demo代码。
- 具体步骤见demo说明。
- 附带截图功能。
- PC端Chrome/Firefox/Edge等标准浏览器调试没问题。
- demo要放到web服务环境。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>video.js播放HLS、FLV、MP4</title><link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" /><link href="https://cdn.bootcdn.net/ajax/libs/video.js/7.21.0/video-js.min.css"rel="stylesheet"><style>
body{
margin:2rem;}
.videoWarp {
/*
width: 30px;
height: 20px;
*/
}
/*进度条
.video-js .vjs-progress-control {
opacity: 1!important;
margin-right:9%;}
*/
/*剩余时长*/
.video-js .vjs-remaining-time{
margin-right:7%;}
/*截图按钮*/
.screenshotBtn {
position: absolute;
top: 6px;
right: 54px;}</style></head><body><div class="row"><div class="videoWarp col-md-4"id="videoWarp1"><video id="video1"class="video-js vjs-big-play-centered vjs-fluid" controls controlslist="nodownload"preload="auto"crossOrigin="Anonymous"></video></div><div class="videoWarp col-md-4"id="videoWarp2"><video id="video2"class="video-js vjs-big-play-centered vjs-fluid" controls controlslist="nodownload"preload="auto"crossOrigin="Anonymous"></video></div><div class="videoWarp col-md-4"id="videoWarp3"><video id="video3"class="video-js vjs-big-play-centered vjs-fluid" controls controlslist="nodownload"preload="auto"crossOrigin="Anonymous"></video></div></div><div class="row"><div class="col-md-4"id=""><h2>FLV</h2></div><div class="col-md-4"id=""><h2>HLS</h2></div><div class="col-md-4"id=""><h2>MP4</h2></div></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/video.js/7.21.0/video.min.js"></script><script src="https://unpkg.com/videojs-flvjs/dist/videojs-flvjs.min.js"></script><script src="https://unpkg.com/flv.js/dist/flv.min.js"></script><script src="https://www.webrtc-experiment.com/screenshot.js"></script><script type="text/javascript">let videoUrlFLV ='https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv';let videoUrlHLS ='http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8';let videoUrlmp4 ='http://vjs.zencdn.net/v/oceans.mp4';let videoPlayer = null;
initVideoJS('video1','flvjs',videoUrlFLV);
initVideoJS('video2','html5',videoUrlHLS);
initVideoJS('video3','html5',videoUrlmp4);
// 初始化Videojs插件
function initVideoJS(vid,vtype,vurl){let vSourceType ='';if(vtype ==='flvjs'){ //flv格式
vSourceType ='video/x-flv';}elseif((vtype === 'html5')&&(vurl.substring(vurl.lastIndexOf(".")+1)=== "m3u8")){ //hls格式
vSourceType ='application/x-mpegURL';}elseif((vtype === 'html5')&&(vurl.substring(vurl.lastIndexOf(".")+1)=== "mp4")){ //mp4格式
vSourceType ='video/mp4';}else{ //其它格式
alert('Video Type Error ...');}
videoPlayer = videojs(vid, {
autoplay: true, //自动播放
controls: true, //用户可以与之交互的控件
loop: true, //视频一结束就重新开始
muted: true, //默认情况下将使所有音频静音
aspectRatio: '16:9', //显示比率
disablePictureInPicture:true, //禁用画中画
techOrder: [vtype], //['HTML5',''flvjs'] 播放模式及顺序
preload: "auto", //预加载
playsinline: true, //解决在iPhone中播放时自动全屏问题
controlBar: { // 设置控制条组件
/* 设置控制条里面组件的相关属性及显示与否 */
'remainingTimeDisplay':true,
/* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
children: [
{name: 'playToggle'}, // 播放/暂停按钮
{
name: 'volumePanel', // 音量控制
inline: false, // 竖直方式
},
{name: 'liveDisplay'}, //直播流时，显示LIVE
{name: 'progressControl'}, // 播放进度条
{name: 'remainingTimeDisplay'}, // 剩余时长
{name: 'FullscreenToggle'}, // 全屏
]
},
flvjs: {
mediaDataSource: {
isLive: true,
cors: true,
withCredentials: false,
},
},
sources: [{src: vurl, type: vSourceType}],
}, function () {
});
setTimeout(() => {
videoPlayer.play();
addScreenshotBtnHandle()
}, 500)
}
//视频区域禁用右键
$("#video1, #video2, #video3").bind('contextmenu', function(){
return false;
});
// 添加截图按钮
function addScreenshotBtnHandle(params) {
$('.vjs-control-bar').append("<div class='screenshotBtn'><svg t='1619515761104' class='icon' viewBox='0010241024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='11028' width='15' height='15'><path d='M512 384c55.6 0107.821.6147.160.9S720 536.4720 592s-21.6 107.8-60.9 147.1S567.6 800512 800s-107.8-21.6-147.1-60.9S304 647.6304 592s21.6-107.8 60.9-147.1S456.4 384512 384z m0-64c-150.2 0-272 121.8-272 272s121.8 272272272272-121.8 272-272-121.8-272-272-272z' p-id='11029' fill='#ffffff'></path><path d='M650.9 128l4.4 23.6C666.7 212.1 719.6 256 781.1 256H896c35.3 0 64 28.7 64 64v512c0 35.3-28.7 64-64 64H128c-35.3 0-64-28.7-64-64V320c0-35.3 28.7-64 64-64h114.9c61.6 0 114.5-43.9 125.8-104.4l4.4-23.6h277.8z m39.8-64H333.3c-7.7 0-14.3 5.5-15.7 13.1l-11.8 62.7c-5.7 30.3-32.1 52.2-62.9 52.2H128C57.3 192 0 249.3 0 320v512c0 70.7 57.3 128 128 128h768c70.7 0 128-57.3 128-128V320c0-70.7-57.3-128-128-128H781.1c-30.8 0-57.2-21.9-62.9-52.2l-11.8-62.7c-1.4-7.6-8-13.1-15.7-13.1z' p-id='11030' fill='#ffffff'></path><path d='M224 352h-64c-17.7 0-32-14.3-32-32s14.3-32 32-32h64c17.7 0 32 14.3 32 32s-14.3 32-32 32zM512 560c17.6 0 32 14.4 32 32s-14.4 32-32 32-32-14.4-32-32 14.4-32 32-32z m0-64c-53 0-96 43-96 96s43 96 96 96 96-43 96-96-43-96-96-96z' p-id='11031' fill='#ffffff'></path></svg></div>")}
// 截图按钮点击事件
$(document).on('click', '.screenshotBtn', function(){
const fileType ='png';
// 找到需要截图的video标签
const video =$(this).parent().siblings("video")[0];
//console.log(video);
video.crossOrigin ="anonymous";
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d') .drawImage(video, 0, 0, canvas.width, canvas.height); // 图片大小和视频分辨率一致
const strDataURL = canvas.toDataURL('image/' + fileType); // canvas中video中取一帧图片并转成dataURL
let arr = strDataURL.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n)while(n--){
u8arr[n]= bstr.charCodeAt(n)}
const blob = new Blob([u8arr], {
type: mime
})
const url = window.URL.createObjectURL(blob);
downloadFile(url, 'png')})
// 下载截图
function downloadFile(blob, fileType){
const a = document.createElement('a')
a.style.display ='none'
a.href = blob
const time= new Date().getTime()
a.download =`${time}.${fileType}`
document.body.appendChild(a)
a.click()
setTimeout(function(){
document.body.removeChild(a)
window.URL.revokeObjectURL(blob)}, 1000)}</script></body></html>
测试公用资源（发时可用）
RTSP
rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4
rtsp://213.34.225.97/axis-media/media.amp
rtsp://37.157.51.30/axis-media/media.amp
rtsp://71.83.5.156/axis-media/media.amp
FLV
https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv
https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv
https://www.sample-videos.com/video123/flv/720/big_buck_bunny_720p_1mb.flv
HLS
http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8
http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8
http://hls01open.ys7.com/openlive/f65a2cc9f9d9453fb349a338824efb9f.m3u8
http://hls01open.ys7.com/openlive/90ffd8fac3bb486b83cb1fa5cb0553f6.m3u8
RTMP
rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp
rtmp://ns8.indexforce.com/home/mystream
MP4
http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
http://vjs.zencdn.net/v/oceans.mp4
https://media.w3.org/2010/05/sintel/trailer.mp4
参考：
https://blog.csdn.net/weixin_45264424/article/details/127566450
本文转载自: https://blog.csdn.net/phpfer/article/details/128316476
版权归原作者 东成熙就 所有， 如有侵权，请联系我们删除。
版权归原作者 东成熙就 所有， 如有侵权，请联系我们删除。