使用套件以及业务说明:在使用海康萤石云的轻应用-视频开发套件的时候,根据公司需要,需要根据不同的直播地址在页面点击按钮切换直播的显示,效果图如下。前端框架用的是Layui
问题描述:在点击切换按钮的时候出现异常no source found in video tag,原因是我只使用了一个Video标签来加载多个视频源的,一个video只能加载一个视频源,于是我用拼参数的方式来加载多个视频源。
我的直播视频显示的总体思路:
1.将需要在前台的直播地址,封装到一个Array里面
2.从array中取出地址,按照直播地址的顺序构建切换的按钮
3.在按钮中添加点击事件方法,并且取到直播的地址和数组的id,传入切换直播的方法
4.直播方法中重新构建直播的html,并且附上直播的地址
HTML代码如下:
<div id="videoLabel">
<video id="myPlayer" autoplay src="" width="860px" height="400px" controls playsInline webkit-playsinline> </video>
</div>
<div id="videoButton"></div>
var videoUrlArray = new Array ( ) ;
videoUrlArray[ 0 ] = "http://hls.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8" ;
videoUrlArray[ 1 ] = "http://hls.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8" ;
videoUrlArray[ 2 ] = "http://hls.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8" ;
videoUrlArray[ 3 ] = "http://hls.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8" ;
setVideoUrl ( )
var urlButton = '' ;
function setVideoUrl ( ) {
for ( c = 0 ; c < videoUrlArray. length; c++ ) {
var videoUrl = videoUrlArray[ c] ;
if ( videoUrl != null && videoUrl != '' ) {
urlButton = urlButton + "<button class='layui-btn' onClick='onClickVideo(" + c + ")' >" + c + "</button>" ;
}
}
var initUrl = videoUrlArray[ 0 ] ;
$ ( '#myPlayer' ) . attr ( "src" , initUrl) ;
player = new EZUIKit. EZUIPlayer ( 'myPlayer' ) ;
player. play ( ) ;
$ ( "#videoButton" ) . html ( urlButton) ;
}
onClickVideo = function ( c) {
var url = videoUrlArray[ c] ;
switchVideo ( url, c)
}
function switchVideo ( url, c) {
var src = $ ( '#myPlayer' ) . attr ( "src" ) ;
if ( src != 'undefined' ) {
player. stop ( ) ;
var htmlVideo = '<video id="' + c + '" autoplay src="" width="860px" height="400px" controls playsInline webkit-playsinline > </video>'
$ ( '#videoLabel' ) . html ( htmlVideo)
$ ( '#' + c) . attr ( "src" , url) ;
player = new EZUIKit. EZUIPlayer ( "" + c) ;
}
}