H5視頻/音頻
阿新 • • 發佈：2017-06-19
標準 事件 內容 html vtt 每一個 reload 編碼 titles
video
1.1 標簽原型
- 指定一種視頻格式，不能播就提示
-
<video id="media" src="123.mp4" width="500" poster="examp1.jpg" > 您的瀏覽器不支持video </video>
- 給定多種視頻格式，瀏覽器根據自身支持程度選擇播放哪一種
- 註意：多個
source標簽，瀏覽器會從第一個開始識別，如果第一個不被識別，則會繼續識別第二個；如果第一個識別成功，則會直接播放第一種格式視頻 -
<video controls = “controls”> <source src=”1.mp4”
type=”video/mp4” /> //src屬性寫到source標簽中，要指定視頻的type類型，例如MP4的即為type=“video/mp4” <source src = “2.ogg” type=”video/ogg” /> //ogg格式 <source src=”3.webm” type=”video/webm” /> //webm格式 </video>
1.2 video屬性
| 屬性(常用) | 值 | 功能描述 |
|---|---|---|
| controls | controls | 是否顯示播放控件 |
| autoplay | autoplay | 設置是否打開瀏覽器後自動播放 |
| width | Pilex（像素） | 設置播放器的寬度 |
| height | Pilex（像素） | 設置播放器的高度 |
| loop | loop | 設置視頻是否循環播放（即播放完後繼續重新播放） |
| preload | preload | 設置是否等加載完再播放 |
| src | url | 設置要播放視頻的url地址 |
| poster | imgurl | 設置播放器初始默認顯示圖片 |
| autobuffer | autobuffer | 設置為瀏覽器緩沖方式，不設置autoply才有效 |
1.3 Video 方法
| API | 事件說明 |
|---|---|
| play | video.play(); 播放視頻 |
| pause | video.pause(); 暫停播放視頻 |
| load | video.load(); 將全部屬性回復默認值，視頻恢復重新開始狀態 |
| canPlayType | var support = videoid.canPlayType(‘video/mp4′); 判斷瀏覽器是否支持當前類型的視頻格式 返回值： 空字符串：不支持Maybe：可能支持Probably：完全支持 |
1.4 視頻控制
- Media.volume = value; //音量
- Media.muted = value; //靜音
- TimeRanges(區域)對象
- TimeRanges.length; //區域段數
- TimeRanges.start(index) //第index段區域的開始位置
- TimeRanges.end(index) //第index段區域的結束位置
- Media.controls;//是否有默認控制條
1.5 其他
-
全屏:
element.webkitRequestFullScreen();( webkit)element.mozRequestFullScreen();(Firefox )element.requestFullscreen();(W3C )
-
退出全屏：
document.webkitCancelFullScreen(); (webkit )document.mozCancelFullScreen(); (Firefox)document.exitFullscreen();(W3C)
html5 video 外掛字幕[webVTT]
html5 video 外掛字幕英文簡稱webVTT【video text track 網絡視頻文本軌道】，是一個以.vtt結尾的純文本文件，裏面會包含以下幾種視頻信息：
- 字幕subtitles > 關於對話的轉譯或者翻譯
- 標題captions > 類似於標題，但是還包括音響效果和其他音頻信息。
- 說明description > 預期為一個單獨的文本文件，通過屏幕閱讀器描述視頻
- 章節chapters > 旨在幫助用戶瀏覽整個視頻
- 元數據metadata > 默認不打算展示給觀眾的、和視頻有關的信息和內容。但是你可以使用Javascript來訪問。
WebVTT內容
這裏有一個標準的示例：
WEBVTT
1
00:00:13.000 --> 00:00:16.100
這裏是字幕
2
00:00:16.100 --> 00:00:20.100
這裏是第二行字幕
webvtt文件中的每一項為一個cue，每一個cue以箭頭分割的開始時間和結束時間，cue對應的文本在下一行，每一個cue可以有一個id, cue的時間格式為 hours:minutes:seconds:milliseconds，必須嚴格遵守，時分秒必須為兩位數字，不足的以0填補，毫秒必須是三位數字。
這個裏有個.vtt文件的格式校驗器https://quuz.org/webvtt/?spm=5176.100239.blogcont4269.7.kKaynO
audio
2.1 HTML5 音頻
- 常見的音頻格式
- 音頻編碼：
ACC、MP3、Vorbis
- 音頻編碼：
-
HTML5支持的音頻格式：
Ogg免費 支持的瀏覽器:C、F、OMP3收費 支持的瀏覽器:I、C、SWav收費 支持的瀏覽器:F、O、S
2.2標簽創建
audio元素創建
<audio controls src="123.mp3"> </audio>
audio source元素
<audio controls> <source src="123.mp3"> <source src="123.ogg"> </audio>
2.2 audio 屬性
-
autoplay自動播放 -
controls向用戶顯示播放控件 -
loop循環 -
preload是否等加載完再播放 -
src要播放的音頻的 URL
H5視頻/音頻