原生JavaScript实现video播放器中播放/暂停/快放/慢放/慢动作功能

原生JavaScript实现video播放器中播放/暂停/快放/慢放/慢动作功能_第1张图片

HTML代码


<htm>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    
    
head>
<body>

	
<video src="1.mkv" controls="controls" id="Video">video>
	
	
	
<button onclick="VideoPlay()">播放/暂停button>
<button onclick="VideoFast()">快进button>
<button onclick="VideoSlow()">快退button>
<button onclick="VideoSlowmotion()">慢动作button>
	

body>
htm>

播放/暂停功能

获取video元素,通过paused()方法判断视频是否处于暂停状态,paused()会返回一个布尔值。
当视频处于暂停状态时返回true,从而执行play()方法让视频开始播放。
当视频处于播放状态时返回flase,故if条件不成立,从而执行pause()方法让视频暂停。

function VideoPlay(){

     // 获取视频控件(video)
     var Video = document.getElementById('Video');
        
     // 判断是否处于暂停状态从而播放或暂停
     if(Video.paused){//如果处于暂停状态则
         Video.play();//开始播放
        }else{
         Video.pause();//暂停播放
     }
 }

快放功能

获取video元素,通过play()方法让处于暂停状态的视频播放,然后改变playbackRate的值实现快放。
使用Video.playbackRate+=1方式,让每次点击按钮时playbackRate值+1,并使用sign变量接收。
如果sign>=8,则代表已经到达了最高快放倍数,这时将playbackRate重置为1(正常速度)。
注意:当playbackRate=0时,则代表视频播放速度为0,这时候视频是不会播放的。

function VideoFast(){

     // 获取视频控件(video)
     var Video = document.getElementById('Video');
        
     // 首先让处于暂停的视频播放
     Video.play();

     // 通过改变playbackRate值控制倍速
     sign = Video.playbackRate+=1;
     console.log("当前快放倍速为:" + sign + "倍!");
     	if(sign>=8){//如果>=8倍则
         Video.playbackRate = 1;//重置为正常倍数
         console.log("已到达最高快放倍数,已恢复正常!");
     }
 }

慢放功能

此功能可以在已经快放的视频中慢放该视频的速度,同样操作playbackRate的值。
同快放功能思路相同,只需要将快放功能累加的playbackRate值慢慢减回即可。
所以,这里使用Video.playbackRate-=1方式,每次点击后视频从快放过渡到慢放再过渡到正常。

function VideoSlow(){

     // 获取视频控件(video)
     var Video = document.getElementById('Video');

     // 首先让处于暂停的视频播放
     Video.play();

     // 通过改变playbackRate值控制倍速
     sign = Video.playbackRate-=1;
     console.log("当前慢放倍速为:" + sign + "倍!");
     if(sign<=2){//如果<=2倍则
       Video.playbackRate = 1;//重置为正常倍数
       console.log("已到达最低慢放倍数,已恢复正常!");
    }
}

慢动作功能

获取video元素,通过play()方法让处于暂停状态的视频播放,减小playbackRate的值实现慢动作。
通过Video.playbackRate = Video.playbackRate * 0.5方式,每次乘0.5逐渐减小倍速,playbackRate正常播放值为1,所以10.5=0.5,0.50.5=0.25会减慢播放速度,实现慢动作播放。
当playbackRate=0.25时if成立,故执行Video.playbackRate = 1恢复正常速度。
因为继续乘0.5的话数字会非常接近0,相当于视频没有播放。

function VideoSlowmotion(){

     // 获取视频控件(video)
     var Video = document.getElementById('Video');

     // 首先让处于暂停的视频播放
     Video.play();

     // 通过改变playbackRate值控制倍速
     Video.playbackRate = Video.playbackRate * 0.5;
     sign = Video.playbackRate;
     console.log("当前慢动作倍数为:" + sign + "倍!");
     if(sign==0.25){
       Video.playbackRate = 1;
       console.log("已恢复正常!");
    }
}

最后,欢迎指正本文存在的错误,如您有更好的实现思路也欢迎留言。

你可能感兴趣的:(+,JScript)