HTML5展示视频的标准，video标签，每个浏览器显示视频的标准不一样，之前大多数通过插件（flash）来实现，现在有了video 后，就可以在所有的现代浏览器中使用音视频标签，只是界面不一样，需要定制化，本文讲述的是如何用音视频的标签定制一个播放器。
一、视频标签 -video
假设需要在页面中展示视频，需要使用HTML5的video标签。
video 元素支持的视频格式不多，主要是MP4, WebM, 和 Ogg。其他的需要转码。
属性：
- width、height定义宽高 默认300*150（视频拥有）
- controls 规定标签是否显示视频播放控件 controls=’controls’
- src 文件路径
- poster 规定视频加载时显示的照片（视频拥有）
- paused 是否暂停了，true表示暂停，false表示播放了
- currentTime 视频播放到当前哪个时间（可读写）
- playbackRate 视频播放速度（1.0正常播放，0.5半速播放，2.0，2倍播放）
- muted 是否静音
- volume 音量最大为1，静音为0，可每次减少0.3
- autoplay 视频在就绪后马上播放
- loop 设置播放完了是否循环播放 loop="loop"
- preload 如果出现该属性，则视频在页面加载时进行加载，并 预备播放。如果使用 "autoplay"，则忽略该属性。
- duration 媒体总时长（只读）
示例：
<video controls="" width="500" height="200" poster="封面图地址" muted autoplay loop>
您的浏览器不支持，请更换或升级！
<!-- source标签导入的视频只会选择一个支持的格式来播放 -->
<source src="media/trailer.mp4" type="video/mp4">
<source src="media/iceage4.webm" type="video/webm">
</video>方法：
//以下方法一般是结合JS使用
play() //播放视频
pause() //暂停播放
load() //更改视频源后重新加载视频，通过source更新的源必须重新load才能应用更改二、音频标签-audio
定义声音，比如音乐或其他音频流
元素支持的3种文件格式：MP3、Wav、Ogg
属性与video类似，可以理解为没有画面的视频标签，方法同video一样。
- src 要播放的音频的 URL
- autoplay 音频在就绪后马上播放
- controls 是否显示控件
- loop 设置播放完了是否循环播放 loop="loop"
- preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
三、source标签
可以加载多个格式的视频、音频源文件,浏览器会按照它所支持的格式去加载
属性：
type:视频 video/ogg、video/mp4、video/webm
音频 audio/ogg、audio/mpeg示例：
<video id="v1" poster="poster.jpg" controls="controls">
<source id="sr1" src="movie.webm"></source>
<source id="sr1" src="movie.ogg"></source>
Your browser does not support the audio element.
</video>检测浏览器对H5+CSS3能力的网站：
https://www.caniuse.com/
四、相关问题
-
为什么存在多种视频格式？
因为每个浏览器内置的音视频解码器都不太一样，有些浏览器用的是免费的解码器，有些是收费的，所以导致浏览器之间支持的音视频格式不一样。
-
为什么每个浏览器的播放界面都不一样？
这是因为H5没有制定统一的视频外观，所以视频外观全部都是由浏览器自定义的。
-
如何做到兼容不同的音视频格式？
在video内嵌套另一个标签source标签
此资源下载链接已被无情的隐藏，请输入验证码解锁：
请关注本站公众号回复“验证码”，获取验证码。
在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号
