HTML5视频播放器

阿酷tony

已于 2022-07-27 11:23:38 修改

阅读量868

点赞数

分类专栏：网页视频播放器文章标签： javascript 前端 servlet

于 2022-07-27 11:17:41 首次发布

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

版权

网页视频播放器专栏收录该内容

49 篇文章 1 订阅

订阅专栏

HTML5视频播放器自定义：

第1部分：播放器部分：

 
<div id="video_div" style="text-align:center;"> 
<button onclick="playPause()">播放/暂停</button> 
<button onclick="toBig()">大</button> 
<button onclick="toNormal()">中</button> 
<button onclick="toSmall()">小</button> 
<video id="myVideo" width="500" height="250" style="margin-top:15px;"> 
<source src="demo.mp4" type="video/mp4" /> 
<source src="demo.ogg" type="video/ogg" /> 
您的浏览器不支持此HTML5 视频标签。 
</video> 
</div>

第2部分：JS部分：

<script type="text/javascript"> 
var myVideo=document.getElementById("myVideo"); 
function playPause() 
{ 
if (myVideo.paused) 
myVideo.play(); 
else 
myVideo.pause(); 
} 
function toBig() 
{ 
myVideo.width=560; 
} 
function toNormal() 
{ 
myVideo.width=420; 
} 
function toSmall() 
{ 
myVideo.width=320; 
} 
</script>