videojs

2018-10-24 08:42:20来源：博客园阅读 ()

 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/>