Native Audio and Native Video

stylever發表於2019-02-16
IDE

HTML5之前，在網頁中實現音訊和視訊的播放功能需要藉助第三方外掛，如Adobe Flash來實現。而在HTML5中，提供了audio和video元素，使用起來更加方便。

Audio

  • Audio元素

方法一：
<audio src="music.mp3" controls>music audio</audio>
方法二：
<audio controls>
   <source src="music.mp3" type="audio/mpeg">music audio
</audio>

  • 建立Audio物件

方法一：
var audio = new Audio();
方法二：
var audio = document.createElement(`audio`);

  • 訪問Audio物件

<audio id="music-audio" src="music.mp3"></audio>
var audio = document.getElementById(`music-audio`);
屬性 描述
duration 音訊的長度（以秒計）
ended 音訊的播放是否已結束
error 表示音訊錯誤狀態的 MediaError 物件
loop 設定或返回音訊是否應在結束時再次播放
paused 設定或返回音訊是否暫停
played 返回表示音訊已播放部分的 TimeRanges 物件
preload 設定或返回音訊的 preload 屬性的值
volume 設定或返回音訊的音量
muted 設定或返回是否關閉聲音
方法 描述
play() 開始播放音訊
pause() 暫停當前播放的音訊 
音訊支援型別：.acc, .mp3, .ogg, .wav, .webm
preload 預載入
    ● auto - 當頁面載入後載入整個音訊
    ● metadata - 當頁面載入後只載入後設資料
    ● none - 當頁面載入後不載入音訊

Video

  • Video元素

方法一：
<video src="movie.mp4" controls>movie video</video>
方法二：
<video controls>
   <source src="movie.mp4" type="video/mp4">movie video
</video>

  • 建立Video物件

var video = document.createElement(`video`);

  • 訪問Video物件

<video id="movie-video" src="movie.mp4"></video>
var video = document.getElementById(`movie-video`);
屬性 描述
width 設定視訊播放器的寬度
height 設定視訊播放器的高度
duration 視訊的長度（以秒計）
ended 視訊的播放是否已結束
error 表示視訊錯誤狀態的 MediaError 物件
loop 設定或返回視訊是否應在結束時再次播放
paused 設定或返回視訊是否暫停
played 返回表示視訊已播放部分的 TimeRanges 物件
preload 設定或返回視訊的 preload 屬性的值
muted 設定或返回是否關閉聲音
poster 規定視訊下載時顯示的影像，或者在使用者點選播放按鈕前顯示的影像
方法 描述
play() 開始播放視訊
pause() 暫停當前播放的視訊 
preload 預載入
    ● auto - 當頁面載入後載入整個視訊
    ● metadata - 當頁面載入後只載入後設資料
    ● none - 當頁面載入後不載入視訊

相關文章