audio
标签定义声音,比如音乐或其他音频流。改标签内含有的属性以及兼容性(已火狐和谷歌为例)
<!-- autoplay 自动播放 (火狐支持 浏览器兼容 谷歌不支持) muted 规定视频输出应该被静音 (都支持) loop 则每当音频结束时重新开始播放(都支持) preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。(都支持) controls 如果出现该属性,则向用户显示控件,比如播放按钮。(都支持) -->
<audio src="南屏晚钟.mp3" controls muted autoplay > 您的浏览器不支持 </audio>
再上面浏览器中 火狐音频所有属性都支持的,谷歌不支持自动播放,(除了谷歌都支持),而且在ie8中打开只显示您的浏览器不支持,因为ie8就是不支持。而且视频格式分为很多种,浏览器支持的也不同,我们可以用source 引入。支持什么格式引入什么格式的文件,都不支持那就是您的浏览器不支持了。
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 你的浏览器不支持 </audio>
video
标签定义视频,比如电影片段或其他视频流。引入资源与属性与音频基本相同、自动播放除了谷歌其余都是可以的。
<!-- autoplay 如果出现该属性,则视频在就绪后马上播放。 controls 如果出现该属性,则向用户显示控件,比如播放按钮 height 设置视频播放器的高度 loop 如果出现该属性,则当媒介文件完成播放后再次开始播放 muted 规定视频的音频输出应该被静音 poster 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像 preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。 width 设置视频播放器的宽度 -->
<video width="300" height="300" src="Passenger - Restless Wind.mp4" controls autoplay></video>
备注:谷歌的自动播放也可以做 我们加上 muted 属性,在谷歌浏览器中静音状态下是可以自动播放的。