音频和视频

嵌入一个WebM视频

<video src="beier.mp4" width="640" height="480" ></video>

解释：<video>插入一个视频，主流的视频为.webm，.mp4，.ogg等。src表示资源URL；width表示宽度；height表示高度,此时，需要在视频上右键播放

附加一些属性

<video src="beier.mp4" width="640" height="480" controls autoplay loop muted></video>

解释：autoplay表示自动开始播放；controls表示显示播放控件；loop表示循环播放；muted表示静音。

使用预览图

<video src="beier.mp4" width="640" height="480" controls poster="img.png"></video>

解释：poster属性表示在视频的第一帧，做一张预览图。

预加载设置

<video src="beier.mp4" width="640" height="480" controls preload="none"></video>

 

<video src="beier.mp4" width="640" height="480" controls preload="metadata"></video>

 

<video src="beier.mp4" width="640" height="480" controls preload="auto"></video>

解释：preload属性有三个值：none表示播放器什么都不加载；metadata表示播放之前只能加载元数据（宽高、第一帧画面等信息）；auto表示请求浏览器尽快下载整个视频

兼容多个浏览器

<video width="640" height="480" controls>

         <source src="test.webm">

         <source src="test.mp4">

         <source src="test.ogg">

</video>

解释：通过<source>元素引入多种格式的视频，让更多的浏览器保持兼容

嵌入一个音频

<audio src="zyp.mp3" controls></audio>

解释： src视频资源的URL  autoplay设置后，表示立刻开始播放视频  preload设置后，表示预先载入视频controls设置后，表示显示播放控件

兼容多个浏览器

<audio controls>

         <source src="test.mp3">

         <source src="test.m4a">

         <source src="test.wav">

</audio>