video和audio元素的属性、事件及使用

最新推荐文章于 2024-04-17 10:54:16 发布

Fine9548

最新推荐文章于 2024-04-17 10:54:16 发布

阅读量1.1k

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/Fine9548/article/details/106607016

版权

video和audio元素

HTML5中主要增加了两个新的多媒体元素：video和audio。从字面意思可以知道，video元素是与视频相关的，用于在页面中播放视频文件；audio元素是与音频相关的，用于在页面中播放音频文件。

autoplay属性

该属性用于设置指定的媒体文件，在页面加载完毕后是否自动播放。对于有的页面来说，所包含的视频或音频信息，不需要得到用户指令就可以直接播放。例如，页面内的宣传片、广告信息等，可以在对应的多媒体元素上添加autoplay属性的设置达到媒体自动播放的效果。
使用autoplay属性的示例代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5的多媒体 </title>
</head>
<body>
    <video id="myvideo" src="video/video1.mp4" autoplay="true"></video>
    <audio id="myaudio" src="audio/audio.mp3" autoplay="true"></audio>
</body>
</html>

controls属性

**该属性用于在页面播放器面板上，显示一个元素自带的控制按钮工具栏。**工具栏中提供了播放/暂停按钮、播放进度条、静音开关，对于不同的浏览器，该工具栏样式可能会有所区别。
使用controls属性的示例代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5的多媒体 </title>
</head>
<body>
    <video id="myvideo" src="video/video1.mp4" controls="true">
    </video>
    <br>
    <br>
    <audio id="myaudio" src="audio/audio1.mp3" controls="true">
    </audio>
</body>
</html>