Audio 和 Video的簡單介紹
HTML多媒體 , 主要分為Audio 音訊和 Video 視訊。
1:Audio
基本語法
src
指定當前播放的音訊檔案,controls
播放控制器,loop
歌曲迴圈,autoplay
自動播放 (chrome66之後被禁止)主流瀏覽器已經關閉了自動播放,需要js觸發才行,preload
預載入,如果使用了autoplay這個屬性preload就失效了。
<audio src="xxxx.mp3" controls="controls" loop="loop" autoplay="autoplay"> 您的瀏覽器不支援html5的audio標籤 </audio>
Audio支援格式有:
Firefox:支援 Ogg Vorbis和WAV
Opera :支援Ogg Vorbis和WAV
Safari :支援MP3,AAC格式 ,和MP4
Chrome :支援Ogg Vorbis,MP3,WAV,AAC和MP4
Internet Explorer 9+ :支援MP3,AAC格式 ,和MP4
IOS :支援MP3,AAC格式 ,和MP4
Android :支援AAC和MP3
Audio 不光是一個HTML標籤,它還是一個window物件。既然是物件,那就有方法和屬性。
物件的常用屬性和方法
-
currentTime,獲取當前播放時間
-
duration,獲取歌曲的總時間
-
play,播放
audio.addEventListener("play",() => {}); audio.onplay = () => {}
-
pause,暫停
-
loadstart,開始載入
-
durationchange,時長資料變化
-
loadedmetadata,元資料已載入
-
progress,載入中
-
canplay,可以播放
-
canplaythrough,邊緩衝邊播放
-
play(),播放歌曲
-
pause(),暫停歌曲
-
load(),重新載入歌曲
Audio.js
以前的Audio瀏覽器是不能直接播放的,如果需要播放一個音訊需要藉助一個flash外掛。後來有了Audio.js的出現後,播放音訊不用依賴flash外掛了。flash是使用as來編寫的,它和JavaScript有點相像,但是有一些門檻,在此基礎上,出現了很多的Audio外掛,audio外掛做了兩件事情,一件是舊版的瀏覽器相容(
// 載入audio.js
<script src="/audiojs/audio.min.js"></script>
// 靜態載入
<script>
audiojs.events.ready(function() {
const as = audiojs.createAll();
});
</script>
// 動態載入
<audio style="display:none" src="./music.mp3" preload="auto" />
2:Video
基本語法
src
源,controls
播放控制器,loop
迴圈播放,autoplay
自動播放,height
,width
,寬度和高度,在Audio裡面不能指定,但是在Video裡面是可以的,muted
靜音,poster
預覽圖(當視訊沒有播放或者正在載入時展示給使用者的一張圖片,為了互動的友好性),preload
預載入,和autoplay
一塊時失效。
<video src="xxxx.mp4" controls="controls" loop="loop" autoplay="autoplay">
您的瀏覽器不支援html5的video標籤
</video>
Video 物件
常用的屬性和方法:
-
currentTime,獲取當前播放時間
-
duration,獲取歌曲的總時間
-
play,播放
video.addEventListener("play",() => {}); video.onplay = () => {}
-
pause,暫停
-
loadstart,開始載入
-
durationchange,時長資料變化
-
loadedmetadata,元資料已載入
-
loadeddata,當前幀的資料已載入,無法播放下一幀
-
progress,載入中
-
canplay,可以播放
-
canplaythrough ,邊緩衝邊播放
-
play(),播放視訊 返回一個promise
-
pause() ,暫停視訊
-
load() ,重新載入視訊
視訊格式與流媒體
video支援的視訊的格式主要有三種:MP4、ogg、webm。
Firefox :支援Ogg Theora格式和WEBM
Opera :支援Ogg Theora格式和WEBM
Safari :支援MP4
Chrome :支援Ogg Theora格式,MP4和WEBM
Internet Explorer 9 :支援MP4和WEBM(需要安裝外掛)
IOS :支援MP4
Android :支援MP4和WEBM(Android 2.3版本以上)
流媒體是指採用流式傳輸的方式在Internet播放的媒體格式(流媒體格式video標籤是不支援的)。流媒體又叫流式媒體,它是指商家用一個視訊傳送伺服器把節目當成資料包發出,傳送到網路上。使用者通過解壓裝置對這些資料進行解壓後,節目就會像傳送前那樣顯示出來。
典型的流媒體格式:rtmp、rtsp、flv都是流媒體的傳輸協議。
rtmp 是Adobe公司提供的一個流媒體協議,使用的是TCP協議,穩定性好rtsp 是Netscape網景公司提供的一種協議,使用的是UDP協議,實時性好flv 是蘋果公司提出的一個流媒體的一個協議,也是使用的TCP協議,把整個視訊流切割成一段一段的m3u8檔案
Video.js
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
const player = videojs('video', options, function onPlayerReady() {
this.play();
this.on('ended', function() {
videojs.log('播放結束');