使用VScode平台实现HTML多媒体 标签笔记

1、音频<audio>

常见属性：

（1）autoplay  值：autoplay        如果出现该属性在就绪后马上播放

（2）controls   值：controls          如果出现该属性，则向用户显示控件，比如播放按钮

（3）loop         值：loop               如果出现该属性，则每当音频结束时重新开始播放

（4）src           值：url                  要播放的音频的URL

语法格式：

<audio scr="文件地址"  controls="controls"></audio>

注意：由于有些浏览器支持的音频格式可能为ogg vorbis或mp3或wav的格式，即这边建议在编写时准备好ogg和mp3格式进行编写，这样可以更好的兼容所用的浏览器！

代码方案改写如下：

<audio controls="controls">

          <source scr="music.mp3"    type="audio/mpeg">

          <source scr="music.ogg"    type="audio/ogg">

          您的浏览器暂时不支持audio标签！

</audio>

2、视频<video>

常见属性：

（1）autoplay   值：autoplay   视频就绪自动播放（谷歌浏览器禁用该标签属性）

解决方案：添加muted属性

（2）controls    值：controls     向用户显示播放控件

（3）width        值：pixels        设置播放器宽度

（4）height       值：pixels        设置播放器高度

（5）loop          值：loop          播放完是否继续播放该视频，循环播放

（6）preload     值：auto（预先加载视频）或none（不应加载视频）  规定是否预加载视频（如果有了autoplay就忽略该属性）   

（7）src            值：url              视频url地址

（8）poster       值：Imgurl        加载等待的画面图片

（9） muted      值：muted         静音播放

语法格式：

<video src="文件地址"  controls="controls"></video>\

注意：由于有些浏览器支持的音频格式可能为ogg或mpeg4或webm的格式，即这边建议在编写时准备好ogg和mpeg4格式进行编写，这样可以更好的兼容所用的浏览器！

改写格式如下：

<video controls="controls">

          <source src="happy.ogg"   type="video/ogg">       

          <source src="happy.mp4"   type="video/mp4">

          您的浏览器暂不支持video标签播放视频！

</video>

3、总结

（1）音频标签和视频标签使用基本一致；

（2）浏览器支持情况不同；

（3）谷歌浏览器把音频和视频自动播放禁止了；

（4）我们可以给视频标签添加muted属性可以自动播放视频，而这个方法对于音频不适用；

（5）我们经常设置自动播放，不使用controls控件，循环和设置大小属性。