videojs

傲嬌的愛情發表於2018-10-23
IDEJS
 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/>

 

相關文章