前端video标签播放m3u8格式视频
程序员文章站
2022-07-13 15:39:11
...
前端video标签播放m3u8格式视频
效果如下：
1、引入以下js和css
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>
<style>
.video-js
.vjs-tech {
position: relative !important;
}
.active{
background-color:#00bbff !important;
}
</style>
2、html代码
<body style="overflow-y:auto;">
<div class="contents marginbot">
<div>
<table class="table table-striped table-bordered" style="height: 95%;">
<tbody id="tview_list">
</tbody>
</table>
</div>
</div>
</body>
3、javascrip代码
<script type="text/javascript">
function selectList() {
var myLoad;
$.ajax({
type: "POST",
async: false,
url: 'archives/fetchCameraList',
data: {
XKZBH: XKZBH
},
beforeSend: function () {
myLoad = layer.load();
},
error: function (aa) {
layer.close(myLoad);
layer.msg('服务器忙', {icon: 5, shade: [0.5, '#000'], time: 1000});
},
success: function (data) {
layer.close(myLoad);
var data = data['data'];
if(data && data.length > 0){
var tr1 = $('<tr style="height: 95%;"></tr>');
var tr2 = $('<tr id="titleTr"></tr>');
$.each(data,function (index,rowData) {
var M3u8Url = getObjToString(rowData["DeviceUrl"]["M3u8Url"]);
var Title = getObjToString(rowData["Title"]);
if(index == 0){
tr1.append('<td colspan="'+(data.length)+'" style="text-align: center;"><div id="videobox" style="height: 95%;"><video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup="{}" style="width: 100%;height: 95%;">' +
'<source id="source" src="'+M3u8Url+'" type="application/x-mpegURL"></source></video></div>' +
'</td>');
$("#tview_list").append(tr1);
tr2.append('<td id=\'clickButton'+index+'\' style="text-align: center;cursor: pointer;" onclick="changeVideo(\''+M3u8Url+'\',\''+("clickButton"+index)+'\')">' + Title + '</td>');
$("#tview_list").append(tr2);
}else{
$("#titleTr").append('<td id=\'clickButton'+index+'\' style="text-align: center;cursor: pointer;" onclick="changeVideo(\''+M3u8Url+'\',\''+("clickButton"+index)+'\')">' + Title + '</td>')
}
});
$("#clickButton0").addClass('active').trigger('click');
}
}
});
}
function changeVideo(vdoSrc,clickButtonId) {
$("td[id^='clickButton']").removeClass('active');
$("#"+clickButtonId).addClass('active');
var player = videojs('myVideo');
player.pause();
player.dispose();
document.getElementById('videobox').innerHTML = '';
var str2 = '<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls data-setup="{}" style="width: 100%;height: 95%;">' +
'<source id="source" src="' + vdoSrc + '" type="application/x-mpegURL"></source></video>';
document.getElementById('videobox').innerHTML = str2;
videojs('myVideo', {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false
},function () {
this.play();
});
}
</script>
注意：
1、由于实现videoJS的视频切换，不能等同于常规的mp4等格式视频，直接切换地址，而是需要在点击切换的时候进行销毁原来的videoJS；
2、重新添加一个video标签，对其赋值视频路径；
3、添加到页面后进行再次初始化！
===========================================================================
1、Video.js初始化有两种方式。
a:一种是在<video>标签里面加上class="video-js"和data-setup='{}'属性。两者缺一不可。
b:另外一种初始化 video.js 的方法是通过JS，格式：var player = videojs('myVideo');
上一篇： 解决微信小程序视频组件层级过高的问题