自己动手实现html5视频播放器倍数播放功能

最新推荐文章于 2024-09-23 15:39:56 发布

阿酷tony

最新推荐文章于 2024-09-23 15:39:56 发布

阅读量1w

点赞数 3

分类专栏： html5 跨平台播放器网页视频播放器播放器开发专栏

本文链接：https://blog.csdn.net/ffffffff8/article/details/83866013

版权

html5 同时被 3 个专栏收录

144 篇文章 6 订阅

订阅专栏

网页视频播放器

51 篇文章 1 订阅

订阅专栏

播放器开发专栏

32 篇文章 5 订阅

订阅专栏

本文介绍如何使用HTML5和JavaScript实现视频播放器的多种功能，包括播放/暂停、调整视频大小及设置2倍速播放等。通过具体代码示例，读者可以学习到如何控制HTML5 video元素，提升用户体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿酷TONY--Tangni</title>
</head>
<body>
<div style="text-align:center">
<button οnclick="playPause()">播放/暂停</button>
<button οnclick="makeBig()">放大</button>
<button οnclick="makeSmall()">缩小</button>
<button οnclick="makeNormal()">普通</button>
<button οnclick="getPlaySpeed()" type="button">当前播放速度</button>
<button οnclick="setPlaySpeed()" type="button">将视频设定为2倍播放速度</button>
<br>
<video id="video" width="600" 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() {
alert("视频将以2倍速度播放");//获取播放速度
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>