html5视频画质清晰度切换和倍速播放切换代码参考

  阿酷TONY  / 原创 / 2022-11-10  /  长沙  / 2022-11-11 /

html5视频播放器如何实现【视频画质清晰度切换】和【倍速播放切换】？

html5视频画质清晰度切换切换效果（1）

 html5视频倍速播放切换效果（2）

html5视频画质清晰度切换和倍速播放切换代码参考：

html5视频画质清晰度切换

用的Html5自带的Video代码现在想增加一个清晰度切换功能，怎么样实现？

	

		
		
		切换至240p
	

       $('.skip').hide();
		var myVideo=document.getElementById("media");
		myVideo.addEventListener('play',function(){
			$('.skip').hide();   
		});
		myVideo.addEventListener('pause',function(){
			$('.skip').show();
		})
 
        function toggleVideo(e){
        	//当前播放时间
        	var curTime=e.currentTime;
        	$("#media").attr("src","video/exo.mp4").attr("autoplay","true");
        	e.currentTime=curTime
        }
 
        $('.toggle-btn').click(function(){
        	toggleVideo(myVideo);
        })

 

html5视频倍速播放切换

培训场景，教育教学场景下，可以倍速观看视频，比如1.5倍，2倍的速度观看视频，可以更快速的看完课程，节省时间。

  播放/暂停
  放大
  缩小
  普通
  播放速度是多少？
  将视频设置为以快速播放
  

  

演示地址： 代码演示 （外链地址）

企业级商用直播应用（无延迟类直播）：

• [原创] OBS Studio导播台多画面使用实测
• [原创] OBS无延迟视频直播完整教程（组图）
• [原创] 使用OBS做无延时/低延迟直播（实测）
• [原创] 毫秒级超低延时直播产品实测（PRTC直播/webRTC直播）

视频播放器/视频加密技术应用：

• [原创] HTML5倍数功能视频播放器（加速2倍，1.5倍播放）
• [原创] 酷播播放器事件/与JS交互实例
• [原创] 教育教学平台类视频加密与安全（组图）
• [原创] 谈谈教学视频加密、防录屏的方法
• [原创] 视频二维码加密码（密码播放功能）
• [原创] 视频加密后的录屏行为怎么做防范？

​​​​​​​