前端入门必看：快速入门HTML5视频元素和音频元素

前言

在了解视频元素和音频元素之前，我们先了解一下背景，在HTML5之前，我们在网页上显示音频和视频是需要通过插件(Flash)来实现的，但是插件无法很好的支持HTML/CSS的特性。所以在HTML5新增了 <video>元素 和 <audio>元素

<video>元素 - 嵌入视频

src 与 controls 属性

<video src="视频链接.mp4" controls></video>
// src 属性用于指向你的视频资源
// controls 属性用给视频提供回放，开始，停止，调整音量的功能

后备内容

<video src="视频链接.mp4">
    <p>你的浏览器不支持 HTML5
        <a herf="视频链接">点击访问<a>
    视频</p>
</video>
// 在video里面添加后备内容，可以在浏览器不支持的时候显示这段内容
// 我们可以在后备内容里面提供视频链接，浏览器不支持的用户点击访问

width 和 height 属性

<video src="视频链接.mp4" width="500px" height="300px" controls></video>
// width 用来控制视频的宽度
// height 用来控制视频的高度

autoplay 属性

<video src="视频链接.mp4" autoplay></video>
// autoplay 属性用于视频的立刻播放

loop 属性

<video src="视频链接.mp4" loop></video>
// loop 属性用于视频的循环播放

muted 属性

<video src="视频链接.mp4" controls muted></video>
// muted 用于视频的默认静音

poster 属性

<video src="视频链接.mp4" controls poster=''></video>
// poster='URL' 属性用于视频在没播放前的图片显示

preload 属性

<video src="视频链接.mp4" controls preload='none/auto/metadata'></video>
// none 不缓冲
// auto 页面加载后缓存媒体文件
// metadata 仅缓冲文件的数据

<audio> 元素  - 嵌入音频

与 video 元素

<audio src="音频链接.mp3"></audio>
// audio 元素不支持 width 和 height 属性 
// 不支持 poster 属性