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

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>

你可能感兴趣的:(video和audio元素的属性、事件及使用)