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

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

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

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

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

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

html5视频画质清晰度切换

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


	<div class="video">
		<video id="media"  controls="controls"   width="600" height="400">
			<source src="video/video.mp4" type="video/mp4" />
			您的浏览器版本太低,请及时更新
		</video>
		<a href="http://www.cuplayer.com" target="_blank" class="skip"></a>
		<a class="toggle-btn">切换至240p</a>
	</div>


       $('.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倍的速度观看视频，可以更快速的看完课程，节省时间。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿酷TONY</title>
</head>
<body>
<div style="text-align:center">
  <button onclick="playPause()">播放/暂停</button>
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">缩小</button>
  <button onclick="makeNormal()">普通</button>
  <button onclick="getPlaySpeed()" type="button">播放速度是多少？</button>
  <button onclick="setPlaySpeed()" type="button">将视频设置为以快速播放</button>
  <br>
  <video id="video" width="420" autoplay controls>
    <source src="test.mp4" type="video/mp4">
    TONY提示：您浏览器不支持 HTML5 video 标签。 </video>
</div>
<script> 
var myVideo=document.getElementById("video"); 
function getPlaySpeed() {
    alert(myVideo.playbackRate);//获取播放速度
    }
function setPlaySpeed()  { 
    myVideo.playbackRate=2;//设定新的播放速度2倍速度
    } 
function playPause(){ 
    if (myVideo.paused) 
      myVideo.play(); //播放
    else 
      myVideo.pause(); //暂停播放
    } 
function makeBig(){ 
    myVideo.width=660; 
    } 
function makeSmall(){ 
    myVideo.width=230; 
    } 
function makeNormal(){ 
    myVideo.width=400; 
    } 
</script>
</body>
</html>

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

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

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

相关阅读:
Vivado下阻塞赋值和非阻塞赋值的对比
通俗讲解傅里叶变换
java计算机毕业设计航空订票管理系统源程序+mysql+系统+lw文档+远程调试
【云原生之kubernetes实战】在k8s环境下部署moredoc文库系统
吴恩达：如何系统学习机器学习？
代码部署git实践,shell教程，截图复制工具
LeetCode_栈_中等_150. 逆波兰表达式求值
Python小游戏-Las Vegas Black Jack- CASINO (21点)
数组中指针不同加1的区别
【SpringMVC】JSON数据返回及异常处理（相信我看完就懂的差不多了）

原文地址：https://blog.csdn.net/ffffffff8/article/details/127799877