<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <meta name="wap-font-scale" content="no"><title>videojs支持hls直播实例</title><link href="./video.css?v=bcd2ce1385" rel="stylesheet"><style type="text/css"> video{ display: block; width: 100%; height: auto; border: 1px solid; } button{ width: 150px; height: 50px; line-height: 50px; text-align: center; margin:30px auto; display: block; }</style></head><body><video id="roomVideo" class="video-js vjs-default-skin vjs-big-play-centered" x-webkit-airplay="allow" poster="" webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto"> <source src="/chat/playlist.m3u8" type="application/x-mpegURL"></video><button id="btn">play</button><script src="./video.js?v=fc5104a2ab23"></script><script src="./videojs-contrib-hls.js?v=c726b94b9923"></script><script type="text/javascript"> var myPlayer = videojs('roomVideo',{ bigPlayButton : false, textTrackDisplay : false, posterImage: true, errorDisplay : false, controlBar : false },function(){ console.log(this) this.on('loadedmetadata',function(){ console.log('loadedmetadata'); //加载到元数据后开始播放视频 startVideo(); }) this.on('ended',function(){ console.log('ended') }) this.on('firstplay',function(){ console.log('firstplay') }) this.on('loadstart',function(){ //开始加载 console.log('loadstart') }) this.on('loadeddata',function(){ console.log('loadeddata') }) this.on('seeking',function(){ //正在去拿视频流的路上 console.log('seeking') }) this.on('seeked',function(){ //已经拿到视频流,可以播放 console.log('seeked') }) this.on('waiting',function(){ console.log('waiting') }) this.on('pause',function(){ console.log('pause') }) this.on('play',function(){ console.log('play') }) }); document.getElementById('btn').addEventListener('click', function(){ myPlayer.play(); }) var isVideoBreak; function startVideo() { myPlayer.play(); //微信内全屏支持 document.getElementById('roomVideo').style.width = window.screen.width "px"; document.getElementById('roomVideo').style.height = window.screen.height "px"; //判断开始播放视频，移除高斯模糊等待层 var isVideoPlaying = setInterval(function(){ var currentTime = myPlayer.currentTime(); if(currentTime > 0){ $('.vjs-poster').remove(); clearInterval(isVideoPlaying); } },200) //判断视频是否卡住，卡主3s重新load视频 var lastTime = -1, tryTimes = 0; clearInterval(isVideoBreak); isVideoBreak = setInterval(function(){ var currentTime = myPlayer.currentTime(); console.log('currentTime' currentTime 'lastTime' lastTime); if(currentTime == lastTime){ //此时视频已卡主3s //设置当前播放时间为超时时间，此时videojs会在play()后把currentTime设置为0 myPlayer.currentTime(currentTime 10000); myPlayer.play(); //尝试5次播放后，如仍未播放成功提示刷新 if( tryTimes > 5){ alert('您的网速有点慢，刷新下试试'); tryTimes = 0; } }else{ lastTime = currentTime; tryTimes = 0; } },3000) }</script></body></html>
下载声明：
评论