您的位置：首页 > Web前端 > HTML5

HTML5<video>标签，使用DOM进行播放控制

2015-11-03 15:54 691 查看

强大而灵活的html5标签，今天学习了一下<video>标签，对以后写视频展示类的网站应该很有帮助，以下是w3cschool中的部分实例代码：

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf8">
<head>

</head>
<body>
<div style="text-align:center">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">普通</button>
<br />
<video id="video1" width="420">
<source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
</video>

</div>

<script type="text/javascript">
var myVideo = document.getElementById("video1");
function playPause()
{
if(myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig(){
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal(){
myVideo.width=420;
}
</script>
</body>
</html>

<video>定义一个视频；
<source>定义多种媒体资源。

定义音频：

<div style="text-align:center">
<audio controls>
<source src="http://www.runoob.com/try/demo_source/horse.mp3" type="audio/mpeg">
</audio>
</div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

HTML5&lt;video&gt;标签，使用DOM进行播放控制

HTML5<video>标签，使用DOM进行播放控制