HTML5视频播放标签video和音频播放标签audio是目前网页中最常用的嵌入多媒体内容的标签。下面是这两个标签的正确用法攻略:
1. HTML5视频播放标签video的正确用法
1.1 定义视频源
首先,需要定义视频源并加载视频文件。可以使用 source 标签来定义视频源,source 标签中的 src 属性指向视频文件的链接地址,type 属性定义视频文件的格式。可以使用多个源标签,用于兼容不同的浏览器。
以下是一个视频源的例子:
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>
- controls 属性用于显示默认的控制条和播放暂停按钮等控制按钮,推荐使用。
- width 和 height 属性用于设置视频的宽高。
1.2 定义其他属性
除了上述的属性之外,还可以定义以下属性:
- poster:定义视频的封面图像,一般在视频未播放时展示。可选。
- autoplay:设置视频在加载后自动播放。可选。
- loop:设置视频在播放完毕后重新开始循环播放。可选。
- muted:设置视频静音。可选。
以下是一个包含所有属性的例子:
<video width="640" height="360" poster="poster.jpg" controls autoplay loop muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>
2. HTML5音频播放标签audio的正确用法
2.1 定义音频源
和视频播放一样,首先需要定义音频源并加载音频文件。可以使用 source 标签来定义音频源,source 标签中的 src 属性指向音频文件的链接地址,type 属性定义音频文件的格式。可以使用多个源标签,用于兼容不同的浏览器。
以下是一个音频源的例子:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<source src="audio.wav" type="audio/x-wav">
</audio>
- controls 属性用于显示默认的控制条和播放暂停按钮等控制按钮,推荐使用。
2.2 定义其他属性
除了上述的属性之外,还可以定义以下属性:
- autoplay:设置音频在加载后自动播放。可选。
- loop:设置音频在播放完毕后重新开始循环播放。可选。
- muted:设置音频静音。可选。
以下是一个包含所有属性的例子:
<audio controls autoplay loop muted>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<source src="audio.wav" type="audio/x-wav">
</audio>
以上就是 HTML5视频播放标签video和音频播放标签audio标签的正确用法的攻略。
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!