html5倍速播放功能源代码实例

html5倍速播放功能源代码实例

    var myVideo = document.getElementById("video");//播放器 var coolPlay = document.getElementById("cool-play"); var cPlay = document.getElementById("c-play");//播放按钮 var cProgress = document.getElementById("c-progress"); var cPlayed = document.getElementById("c-played");//已经播放过的进度条 var cDrag = document.getElementById("c-drag");//进度条顶端的圆钮 var cCurrentTime = document.getElementById("c-currentTime");//当前时间span var cTotalTime = document.getElementById("c-totalTime");//总时间 var loading = document.getElementsByClassName("icon-c-loading");//loading 旋转图标 var refresh = document.getElementsByClassName("icon-c-refresh");//重新加载按钮 var voice = document.getElementsByClassName("i-voice");//音量按钮 var voice_mask = document.getElementsByClassName("voice-mask");//音量总进度条 var voice_bared= document.getElementsByClassName("voice-bared");//现在的音量的进度条 var voice_dot = document.getElementsByClassName("voice-dot"); var voice_num = 0.8;//初始化当前的音量 volume(voice_num);//把音量初始化到80 function volume(n){ myVideo.volume = n; voice_bared[0].style.height=n*100 + 'px'; } function playPause() { if(myVideo.paused) { Play(); } else { Pause(); } }; function Play(){ cPlay.className = "icon-c-pause"; myVideo.play(); } function Pause(){ cPlay.className = "icon-c-play"; myVideo.pause(); } refresh[0].onclick = function (){ Load(); } function Load(){ Pause(); myVideo.load(); cPlayed.style.width = 0+"%"; cDrag.style.display="none"; cCurrentTime.innerHTML = "00:00"; cTotalTime.innerHTML = "00:00"; } //播放时间及进度条控制 myVideo.ontimeupdate = function(){   var currTime = this.currentTime,    //当前播放时间 duration = this.duration;       // 视频总时长 if(currTime == duration){ Pause(); } //百分比 var pre = currTime / duration * 100 + "%"; //显示进度条 cPlayed.style.width = pre; var progressWidth = cProgress.offsetWidth; var leftWidth = progressWidth*(currTime / duration); if(leftWidth > 8 && (progressWidth - leftWidth) > 4){ cDrag.style.display="block";     } else { cDrag.style.display="none"; }   cDrag.style.left = progressWidth*(currTime / duration)-4 + "px"; //显示当前播放进度时间 cCurrentTime.innerHTML = getFormatTime(currTime,duration); cTotalTime.innerHTML = getFormatTime(duration,duration); }; //当浏览器可在不因缓冲而停顿的情况下进行播放时 myVideo.oncanplaythrough = function() { loading[0].style.display="none"; } //当视频由于需要缓冲下一帧而停止 myVideo.onwaiting = function() { loading[0].style.display="block"; } //当用户开始移动/跳跃到音频/视频中的新位置时 myVideo.onseeking = function() { if (myVideo.readyState == 0 || myVideo.readyState == 1) { loading[0].style.display="block"; } } //拖拽进度条上的园钮实现跳跃播放 /*cDrag.onmousedown = function(e){  if(cPlay.className == 'icon-c-pause') myVideo.pause(); loading[0].style.display="block"; document.onmousemove = function(e){ console.log("e.clientX:"+e.clientX); console.log("coolPlay.offsetLeft:"+coolPlay.offsetLeft); var leftV = e.clientX - coolPlay.offsetLeft; console.log("coolPlay.offsetLeft:"+coolPlay.offsetLeft); console.log("leftV:"+leftV); if(leftV <= 0){ leftV = 0; } if(leftV >= coolPlay.offsetWidth){ leftV = coolPlay.offsetWidth-10; } cDrag.style.left = leftV+"px"; //  console.log(leftV); }     document.onmouseup = function (){ var scales = cDrag.offsetLeft/cProgress.offsetWidth; var du = myVideo.duration*scales; console.log("scales:"+scales); console.log("du:"+du); myVideo.currentTime = du; if(cPlay.className == 'icon-c-pause') myVideo.play();      document.onmousemove = null; document.onmousedown = null; } }*/ //在进度条上点击跳跃播放 cProgress.onclick = function(e){ var eevent = e || window.event; console.log("当前点击的位置为："+(event.offsetX / this.offsetWidth) * myVideo.duration); myVideo.currentTime = (event.offsetX / this.offsetWidth) * myVideo.duration; }; //根据duration总长度返回 00 或 00:00 或 00:00:00 三种格式 function getFormatTime(time,duration) { var timetime = time || 0;          var h = parseInt(time/3600), m = parseInt(time%3600/60), s = parseInt(time%60); ss = s < 10 ? "0"+s : s; if(duration>=60 && duration <3600){ mm = m < 10 ? "0"+m : m;  return m+":"+s; } if (duration >=3600){ mm = m < 10 ? "0"+m : m;  hh = h < 10 ? "0"+h : h; return h+":"+m+":"+s; }  return s; }    //音量的控制部分 //点击声音按钮时，把视频静音 voice[0].onclick = function(){   if(myVideo.muted){ voice[0].className="i-voice icon-c-voice"; myVideo.muted=false; if(voice_num >= 0 && voice_num <= 1){ volume(voice_num); } else { volume(0.8); }     } else { voice_num = myVideo.volume; //记录下来静音前的音量 voice[0].className='i-voice icon-c-mute'; myVideo.muted=true; volume(0); }   } //当点击进度条上的一个位置时，变化音量 voice_mask[0].onclick = function(e){ var eevent = e || window.event;   if(event.offsetY >= 100){ voice[0].className='i-voice icon-c-mute'; myVideo.muted=true; volume(0); return; } volume((100-event.offsetY)/100); }; /*voice_mask[0].onmousedown = function(e){  document.onmousemove = function(e){ console.log("e.clientY:"+e.clientY); console.log("e.offsetY:"+e.offsetY); console.log(e); console.log(voice[0].offsetTop); console.log(document.getElementsByClassName("voice")[0]); volume((100-e.offsetY)/100); if(event.offsetY == 100){ voice[0].className='i-voice icon-c-mute'; myVideo.muted=true; volume(0); }    }     document.onmouseup = function (){     document.onmousemove = null; document.onmousedown = null; } }*/ //全屏的控制部分 var fullscreen = document.getElementById('cool-fullScreen'); var FullScreenTF = true; function launchFullscreen(element) { //此方法不能在异步中进行，否则火狐中不能全屏操作 if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.msRequestFullscreen) { element.msRequestFullscreen(); } else if(element.oRequestFullscreen) { element.oRequestFullscreen(); } else if(element.webkitRequestFullscreen) { element.webkitRequestFullScreen(); } else { alert("您的浏览器版本太低，不支持全屏功能！"); } FullScreenTF = false; }; //退出全屏 function exitFullscreen() { if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.msExitFullscreen) { document.msExitFullscreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.oRequestFullscreen) { document.oCancelFullScreen(); } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else { alert("您的浏览器版本太低，不支持全屏功能！"); } FullScreenTF = true; }; fullscreen.onclick = function() {        if(FullScreenTF) { launchFullscreen(coolPlay); fullscreen.className = "icon-c-shrink";          } else { exitFullscreen(); fullscreen.className = "icon-c-enlarge";           } };

html5倍速播放功能源代码实例相关推荐

html5播放器视频倍速播放功能
阿酷TONY 2021-3-24 1. 倍速播放功能可以让视频加速或者减速播放: 2. 在PC端,HTML5播放器能轻松实现倍速播放功能,您可以将视频的播放速度设定为0.5倍,1倍(正常速),1.2倍 ...
html5视频倍速播放功能
h5视频倍速播放功能(视频多倍速观看功能的实例) 写倍速播放器代码的原理,采用的是video的playbackRate属性 ( playbackRate 属性设置或返回音频/视频的当前播放速度). 主 ...
html5播放加速,html5倍速播放插件
Video Speed Controller 是一款倍速播放视频的浏览器插件! 现在网站上播放的视频,基本上都可以实现倍速播放,但偶尔也有些网站上的视频:没有倍速播放功能. 有时候看一些没有倍速播放功 ...
酷播云html5倍速功能视频播放器,可以倍速播放视频的浏览器插件
可以倍速播放视频的浏览器插件 Video Speed Controller 是一款倍速播放视频的浏览器插件! 现在网站上播放的视频,基本上都可以实现倍速播放,但偶尔也有些网站上的视频:没有倍速播放功能 ...
酷播云H5播放器倍速播放功能
大家好,我是小酷,小酷今天来说说H5播放器倍速播放功能: 酷播云是支持HTML5播放器及Flash播放器,两者兼容,可自由切换.其中,H5播放器自带倍速播放功能,用户可选择视频的播放速度. 酷播云Ht ...
百度云HTML5倍速播放视频方法（Microsoft Edge网页播放）
百度云HTML5倍速播放视频方法(Microsoft Edge网页播放) 电脑端使用百度云播放视频有两种途径: 一是下载到本地,然后选择播放器播放,但是按百度的尿性,氪金才能成为人上人,否则下载极慢, ...
超级简单的工具——Video Speed Controller，玩转百度云，轻松解锁百度云视频倍速播放功能！
有经常使用百度云盘看视频需求的小伙伴肯定清楚百度的niao性,如果我们不是人民币玩家,咱就不配享用人家的在线视频倍速播放功能.Emm- 今天给大家分享一个十分简单的工具--Video Speed Co ...
Uni-app Video倍速播放功能
Uni-app Video倍速播放功能前言使用代码前言今天接到一个给播放器新增倍速播放的功能:因为用的是uniapp自带的video,这里面没有倍速播放这个选项.然后在官方文档找了一会儿,找 ...
酷播云html5倍速功能视频播放器,Chrome扩展推荐：一个能16倍速播放的免费视频倍速播放器...
Video Speed Controller 长时间观看看网课或者影视剧时,啰嗦的内容很容易令人疲劳. 因此许多人在观看视频时,常常习惯将播放速度提升至1.3~1.5倍来补偿视觉接收的差异. 虽然某些 ...
音视频之使用sonic.cpp实现音频倍速播放功能
sonic.cpp 是一个音频处理库,可以实现倍速播放. 如果单纯通过修改pcm的采样率来实现音频倍速播放的话,就会出现声音变调的情况. 以下是通过采集windows 虚拟声卡获取到的音频数据, 我的 ...

html5倍速播放功能源代码实例

html5倍速播放功能源代码实例相关推荐

最新文章

热门文章