HTML5播放器倍速观看和画质切换效果

原创已于 2025-05-08 16:16:10 修改 · 372 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html #倍速观看

于 2025-02-20 10:59:58 首次发布

文章存档专栏收录该内容

134 篇文章

订阅专栏

▲ html5视频播放器在课程教学中的应用（图1）

▲ html5视频播放器在课程教学中的应用（图2）

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);
        })

<!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>