1、html5音视频标签
<video>:Html5提供的播放视频的标签
src:资源地址
controls:该属性定义是显示还是隐藏用户控制界面
<audio>:Html5提供的播放音频的标签
src:资源地址
controls:该属性定义是显示还是隐藏用户控制界面
<source>
视频:
type='video/webm; codecs="vp8, vorbis"'
type='video/ogg; codecs="theora, vorbis"'
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
音频:
type='audio/ogg; codecs="vorbis"'
type='audio/aac; codecs="aac"'
type='audio/mpeg'
<video src="resource/video/test.mp4" controls width="500" height="500"></video>
<audio src="resource/audio/test.mp3" controls></audio>
2、video标签的属性
width :视频显示区域的宽度,单位是CSS像素
height :视频展示区域的高度,单位是CSS像素
poster :一个海报帧的URL,用于在用户播放或者跳帧之前展示
src : 要嵌到页面的视频的URL
controls : 显示或隐藏用户控制界面
autoplay : 媒体是否自动播放
loop : 媒体是否循环播放
muted : 是否静音
preload : 该属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么
none: 提示作者认为用户不需要查看该视频,服务器也想要最小化访问流量;
换句话说就是提示浏览器该视频不需要缓存。
metadata: 提示尽管作者认为用户不需要查看该视频,
不过抓取元数据(比如:长度)还是很合理的。
auto: 用户需要这个视频优先加载;换句话说就是提示:如果需要的话,
可以下载整个视频,即使用户并不一定会用它。
空字符串:也就代指 auto 值。
3、audio标签的属性
src
controls
autoplay
loop
muted
preload
音视频兼容性写法: