video元素与audio元素详解

news2025/7/17 21:28:13

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>

执行结果如下：