您的位置：首页 > Web前端 > HTML5

H5浏览器播放RTMP直播流实现切换

2017-06-29 17:29 225 查看

如果有两个视频流同时切换的话，推荐直接移动这个直播源，并改变大小实现切换

下面提供的是通过videoJs提供的方法src替换直播源路径（高低清流切换，更换播放视频流）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视频流切换</title>
<style>
.fl {
float: left;
}
.bgc_pink {
background-color: pink;
}
.bgc_green {
background-color: green;
}
.my-player0-dimensions {
width: 0;
height: 0;
}
.pos_rel {
position: relative;
}
</style>
<link href="http://vjs.zencdn.net/5.19/video-js.min.css"
rel="stylesheet">
<script src="http://vjs.zencdn.net/5.19/video.min.js"></script>
</head>
<body>
<div id="firstShow" class="fl bgc_green pos_rel"
style="width: 600px; height: 400px; margin-right: 100px;">
<!-- 111 -->
</div>
<div class="asideVideos fl"
style="width: 300px; height: 1000px; background-color: #ccc;">
<div id="secondShow" style="width: 300px; height: 300px;"
class="asidePlay bgc_pink pos_rel">
<!-- 222 -->
</div>
</div>
<button id="buu">切换</button>
<script src="/js/jquery.min.js"></script>
<script type="text/javascript">
window.onload=function(){
var player1="rtmp://live.hkstv.hk.lxdns.com/live/hks";//建议换另一个直播源 以便区分
var player2="rtmp://live.hkstv.hk.lxdns.com/live/hks";
var LiveplayerArr=[player1,player2];
$("#firstShow").html('<video id="my-player1" class="video-js" preload="auto" data-setup="{}"><source src="'+LiveplayerArr[0]+'" type="rtmp/flv"/></video>')
.attr("data-playId",1);
$("#secondShow").html('<video id="my-player2" class="video-js" preload="auto" data-setup="{}"><source src="'+LiveplayerArr[1]+'" type="rtmp/flv"/></video>')
.attr("data-playId",2);

$(".video-js").css({
"width":"100%",
"height":"100%"
});
<!-- start-->
function startPlay(id){
var myPlayer = videojs(id);
videojs(id,{},function onPlayerReady() {
videojs.log('Your player is ready!');
this.play();
this.on('ended', function() {
videojs.log('Awww...over so soon?!');
});
});
}
startPlay("my-player1");
startPlay("my-player2");
function rePlay(id,src){
var myPlayer = videojs(id);
videojs(id,{},function onPlayerReady() {
videojs.log('Your player is ready!');
if(src!=""&&src!=null){
$(id+" source").attr("src", src);
myPlayer.src(src);
myPlayer.load(src);
this.play();
}
this.on('ended', function() {
videojs.log('Awww...over so soon?!');
});
});
}
<!-- end-->
$("#buu").click(function(){
alert("000")
var index=$(this).index()+2;
var centerPlayId=$("#firstShow").attr("data-playId");
var asidePlayId=$(this).attr("data-playId");
var centerId=centerPlayId,asideId=asidePlayId;
rePlay("my-player1",LiveplayerArr[asidePlayId-1]);
rePlay("my-player"+index,LiveplayerArr[centerPlayId-1]);
$("#firstShow").attr("data-playId",asidePlayId);
$(this).attr("data-playId",centerPlayId);
});
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： rtmp videojs

相关文章推荐

新的分享

章节导航