videojs
程序员文章站
2022-07-01 20:53:16
1 2 3 4 5 6 7 8 播放视频需要启用 JavaScript,推荐使用支持HTML5的浏览器访问。 9 10 11 84 85 ${HLSUrl } 86 ${RTMPUrl } 87 ${HDLUrl } ......
1 <link href="http://vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet"> 2 <script src="http://vjs.zencdn.net/5.5.3/video.js"></script> 3 <!-- if you'd like to support ie8 --> 4 <script src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script> 5 6 <video id="roomvideo" class="video-js" controls preload="auto" width="100%" height="100%" class="vjs-big-play-centered"> 7 <source src="${rtmpurl }" type="rtmp/flv"> 8 <p class="vjs-no-js">播放视频需要启用 javascript,推荐使用支持html5的浏览器访问。</p> 9 </video> 10 11 <script type="text/javascript"> 12 document.getelementbyid("roomvideo").style.height= window.innerheight +"px"; 13 document.getelementbyid("roomvideo").style.width= window.innerwidth +"px"; 14 15 var options = { 16 techorder : ["html5","flash"], 17 //autoplay:true, //是否自动播放 18 bigplaybutton:false, //是否显示播放按钮 19 controls:true, //是否用显示控制条 20 texttrackdisplay:false, 21 posterimage:false, 22 errordisplay:false, 23 control:{ 24 captionsbutton:false, 25 chaptersbutton:false, 26 subtitlesbutton:false, 27 livedisplay:false, 28 playbackratemenubutton:false 29 }, 30 controlbar: { 31 mutetoggle:false, 32 progresscontrol:false 33 } 34 }; 35 var player = videojs('roomvideo', options, function onplayerready() { 36 videojs.log('播放器已经准备好了!'); 37 player.play(); 38 startvideo(); 39 40 this.on('ended', function() { 41 console.log('播放结束了!'); 42 }); 43 44 }); 45 46 var isvideobreak; 47 function startvideo() { 48 //判断开始播放视频,移除高斯模糊等待层 49 /*var isvideoplaying = setinterval(function(){ 50 var currenttime = player.currenttime(); 51 if(currenttime > 0){ 52 $('.vjs-poster').remove(); 53 clearinterval(isvideoplaying); 54 } 55 },200)*/ 56 57 //判断视频是否卡住,卡主3s重新load视频 58 var lasttime = -1, 59 trytimes = 0; 60 61 clearinterval(isvideobreak); 62 isvideobreak = setinterval(function(){ 63 var currenttime = player.currenttime(); 64 if(currenttime == lasttime){ 65 //此时视频已卡主3s 66 //设置当前播放时间为超时时间,此时videojs会在play()后把currenttime设置为0 67 player.currenttime(currenttime+10000); 68 player.play(); 69 70 //尝试5次播放后,如仍未播放成功提示刷新 71 if(++trytimes > 5){ 72 //dialog('提示',"您的网速有点慢,刷新下试试",1); 73 window.location.reload(); 74 trytimes = 0; 75 } 76 }else{ 77 lasttime = currenttime; 78 trytimes = 0; 79 } 80 },3000) 81 } 82 83 </script> 84 85 ${hlsurl } <br/> 86 ${rtmpurl } <br/> 87 ${hdlurl } <br/>
下一篇: vue 关于数组和对象的更新