根据前段日子自己做过的需求功能，整理了一些东西
video标签的属性：
- autoplay：自动播放
- controls：向用户显示浏览器自带的控件
- width：视频宽度
- height：视频高度
- loop：循环播放
- muted：静音播放
- poster：视频封面，视频下载时显示的图像，没有播放时显示的图片
- preload：预加载，如果已经使用 "autoplay"，则忽略该属性
- src ：要播放的视频的 URL
上面列出的是常用的一些属性，video 的其他的一些属性可以查阅文档
http://www.w3school.com.cn/jsref/dom_obj_video.asp
Video 对象方法：
| 方法 | 描述 |
|---|---|
| addTextTrack() | 向视频添加新的文本轨道。 |
| canPlayType() | 检查浏览器是否能够播放指定的视频类型。 |
| load() | 重新加载视频元素。 |
| play() | 开始播放视频。 |
| pause() | 暂停当前播放的视频。 |
支持的视频格式
- Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
- MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
- WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
用多种格式一般用来处理兼容性问题，还有一种情况是，过低版本的浏览器不支持 <video> 标签，这时候就会使用 flash 来播放视频，所以在做兼容的时候要考虑到这个问题
功能实现
<video id="myVideo" src="url" controls width="400px" heigt="400px"></video>
访问 Video 对象
var x = document.getElementById("myVideo");
创建 Video 对象
var x = document.createElement("VIDEO");
如果是要改默认的控制条的css样式，用样式覆盖就好了
例子1：
自定义按钮
<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button><br>
<video id="myVideo" width="320" height="176">
<source src="url.mp4" type="video/mp4">
<source src="url.ogg" type="video/ogg">
</video>
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
</script>
例子2：
横屏竖屏，只能通过video标签的旋转来实现
记得旋转后还需要缩放一下达到合适播放容器。
/*横屏竖屏转换,不同角度*/
.reverse-portraint {
transform: rotate(180deg);
}
.landscape {
transform: scale(1.78, 1.77) rotate(90deg);
}
.reverse-landscape {
transform: scale(1.78, 1.77) rotate(-90deg);
}
如果你的项目是用手机录制的视频，那么就要在保存视频的时候把录制的角度也存储进去，然后web端就可以做判断，进行不同角度的video旋转。
if (videoInfo.orientation == '4') {
$('#myvideo').addClass('landscape');
} else if (videoInfo.orientation == '3') {
$('#myvideo').addClass('reverse-portraint');
} else if (videoInfo.orientation == '2') {
$('#myvideo').addClass('reverse-landscape');
} else {
console.log("默认角度")
}
例子3：
视频超出屏幕停止播放
用 getBoundingClientRect()方法可以获取到元素的位置参数
//超出屏幕上方停止
var video= document.getElementById("myVideo")
function isElementInViewport(event) {
var rect = event.getBoundingClientRect();
if(rect.top < -rect.height / 2){
video.pause();
}
}
例子4：
如果页面有多个视频的，需要做不同视频间的控制，用视频的 id 来进行操作，注意要确保所有视频 id 不同。
功能：点击一个视频，页面中的处于播放状态的视频都暂停
思路：点击播放的时候，把视频 id 保存起来，然后再次点击另一个视频的时候，判断当前的 id 和之前保存的id 是否一样，不一样就用 pause(); 暂停之前的 id 的video 。把这个方法加在相应按钮上。
en~~ 代码就不写出来了!!
