1.video/audio属性
video元素和audio元素是HTML5中针对视频新增的两个标签,通过对这两个标签进行设置,可以控制页面的 上的音视频的播放。
1.src 属性
设置音/视频文件的URL地址。相关使用代码如下:
<video src="movie.mp4"></video>
<audio src="song.ogg"></audio>
2.autoplay (自动播放属性)
<video src="movie.mp4" autoplay></video>
<audio src="song.ogg" autoplay></audio>
3.preload属性
设置当页面加载时,是否对音/视频文件进行预加载。preload有三个可供选择的值;none表示不进行预加载;metadata表示仅加载元数据,即音/视频文件的大小、第一帧、播放列表和持续时间等;auto表示与预加载全部音/是视频文件。相关使用代码如下。
<video src="movie.mp4" preload="metadata"></video>
<audio src="song.ogg" preload="metadata"></audio>
4.poster属性
该属性是video元素属性,甚至当视频不可用时,向用户展现一幅图片。相关代码如下:
<video src="movie.mp4" poster="replace.jpg"></video>
5.loop属性(音/视频 循环播放)
<video src="movie.mp4" loop></video>
<audio src="song.ogg" loop></audio>
6.controls属性(添加浏览器默认自带的播放控制器,其中包括播放、暂停和声音控制等控件)
<video src="movie.mp4" controls></video>
<audio src="song.ogg" controls></audio>
7.width属性与height属性
这两个属性是video元素属性,width用于设置宽度,height用于 设置高度。
<video src="movie.mp4" width="400" height="300"></video>
8.muted属性
设置页面加载时,播放器是否静音。如果需要静音,就添加该属性,否则不添加该属性。
<video src="movie.mp4" muted></video>
<audio src="song.ogg" muted></audio>
2.video/audio方法
在使用video元素和audio元素时,还可以在脚本中使用相关的方法对音/视频文件进行控制,相关方法主要有四种,下面分别给你介绍:
1.play方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function play(){
var video=document.getElementById('MyVideo');
video.play();
}
</script>
</head>
<body>
<video src="movie.mp4" width="400" height="300" controls id="MyVideo"></video><br>
<button onclick="play()">播放</button>
</body>
</html>
执行结果如下:
2.pause方法
与play方法相对应的pause方法用于控制暂停播放音/视频功能,pause方法也需要在叫脚本中设置才能使用,相关使用代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function pause(){
var video=document.getElementById('MyVideo');
video.pause();
}
</script>
</head>
<body>
<video src="movie.mp4" width="384" height="216" controls id="MyVideo"></video><br>
<button onclick="pause()">暂停</button>
</body>
</html>
执行结果如下:
3.load方法
调用该方法可重新加载音/视频文件进行播放。相关使用代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function load(){
var video=document.getElementById('MyVideo');
video.load();
}
</script>
</head>
<body>
<video src="movie.mp4" width="384" height="216" controls id="MyVideo"></video><br>
<button onclick="load()">重新加载</button>
</body>
</html>
执行结果如下: