根據前段日子自己做過的需求功能，整理了一些東西
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~~ 代碼就不寫出來了!!
