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

最新推荐文章于 2025-04-09 11:09:15 发布

阿酷tony

最新推荐文章于 2025-04-09 11:09:15 发布

阅读量4.4k

点赞数

分类专栏： html5 文章存档酷播云（免费云存储）文章标签：视频清晰度切换倍速播放切换 2倍加速播放

本文链接：https://blog.youkuaiyun.com/ffffffff8/article/details/127799877

版权

文章存档同时被 3 个专栏收录

252 篇文章

订阅专栏

html5

160 篇文章

订阅专栏

酷播云（免费云存储）

55 篇文章

订阅专栏

阿酷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>

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