- 在video标签中，我们可以使用属性：videoWidth & videoHeight，它获取的是video的宽度和高度（媒体本身）。
虽然不能直接使用，但是可以通过计算宽高比得到 video 占用的宽度和高度。
比如让 video 占满宽度为480px的容器，可以根据宽高比得到此时video占用的高度。
重要：
- h5的video标签，修改source的src地址，必须采用动态插入source元素的形式，否则浏览器不会重新请求播放资源。
一般做法：
- 不要自己加暂停时视频中间的继续播放按钮，要使用浏览器默认的。
- 暂停时，页面显示浮层，使用pause事件添加。
介绍链接：http://zhaoda.net/2014/10/30/html5-video-optimization/
播放控制按钮的显示和隐藏：
css：controls="controls"
js: document.getElementById('video1').controls = true 或 false
问题：在iframe中不能全屏播放视频
解决：将iframe修改成
<iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
播放视频时相关控制按钮的css类（支持基于webkit内核的Chrome浏览器）：
video::-webkit-media-controls-panel
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-timeline
video::-webkit-media-controls-current-time-display
video::-webkit-full-page-media::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-toggle-closed-captions-button
video标签在各手机浏览器的兼容性：
| 浏览器 | 暂停时视频中间是否有继续播放图标 | 是否能在页面加浮层 |
|---|---|---|
| chrome | 有 | 能 |
| firefox | 没有 | 能 |
| qq浏览器 | 有 | 不能 |
| 360浏览器 | 有 | 能 |
| UC浏览器 | 有 | 不能 |
| safari | 没有 | 能 |