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

来源：互联网发布：java定义枚举类型编辑：程序博客网时间：2024/06/05 17:19
如果有两个视频流同时切换的话，推荐直接移动这个直播源，并改变大小实现切换
下面提供的是通过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>
阅读全文
1 0