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

HTML5：视频控制

2016-06-17 16:32 441 查看

一：HTML5属性控制视频

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<video src="img/test.mp4"
width="300px"
height="200px"
loop="3"
autoplay="autoplay"
controls="controls"></video>
</body>
</html>

属性解读

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
pixels	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

二：DOM属性控制视频

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="text-align: center;">
<button onclick="playPause()">播放</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeNormal()">原样</button>
<button onclick="makeSmall()">变小</button>
<br/>
<video id="viedo1" width="420px" style="margin-top: 15px;">
<source src="img/test.mp4" type="video/mp4"/>
</video>
</div>
<script type="text/javascript">
var myViedo = document.getElementById('viedo1');
function playPause(){
if(myViedo.paused)
myViedo.play();
}
function makeBig(){
myViedo.width=560;
}
function makeNormal(){
myViedo.width=420;
}
function makeSmall(){
myViedo.width=320;
}
</script>
</body>
</html></span>

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

标签：

相关文章推荐

新的分享

章节导航