欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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