HTML5 Audio & Video - 相容性總結（一）

Christal發表於2019-05-08
HTMLIDE
工作中的總結和記錄，第一次寫，有問題煩請指出，會持續記錄更新...

一、audio

1、監聽播放完成

監聽 ended 事件不準確，可以監聽 timeupdate 事件，判斷 當前播放進度 currentTime 大於等於 總時長 duration 時，就是播放完成；

var oAudio = document.getElementById('audio_player');
oAudio.addEventListener('timeupdate', function () {  
  // 監聽播放完成，ended 事件不準確  
  if (oAudio.currentTime >= oAudio.duration) {    
    _this.endFn();  
  }}, 
false);複製程式碼

2、設定當前音訊播放時間點

ios系統直接設定無效，監聽canplay（可播放時）再設定currentTime才可以；

if (isIos) {   
    oAudio.addEventListener('canplay', () => {       
        oAudio.currentTime = '';   
    }, { once: true })
} else {  // 安卓沒有 canplay 事件    
    oAudio.currentTime = '';
}複製程式碼


3、音訊打點

android 音訊打點 在 play 監聽裡處理，ios 在canplay裡處理

if (isIos) {       
    oAudio.addEventListener('canplay', () => {       
         // ios 音訊打點 可以在這裡處理
    }, { once: true })
} else {  // 安卓沒有 canplay 事件    
    oAudio.addEventListener('play', function () {        
        if (Util.isAndroid) {       
            // 打點程式碼     
        }
    }, { once: true });
}

複製程式碼


4、設定音訊載入 loading 效果

ios 可監聽 canplay 事件時移除 loading 效果，監聽 loadstart 和 loadeddata 事件時新增 loading 效果；

if (isIos) { 
    oAudio.addEventListener('loadstart', () => {    
        if (isIos) {        
            _this.isLoadaudio = true;    
        }
    }, false)
    oAudio.addEventListener('loadeddata', () => {    
        if (isIos) {        
            _this.isLoadaudio = true;    
        }
    }, false)
   
    oAudio.addEventListener('canplay', () => {        
        _tihs.isLoadaudio = false;    
    }, { once: true }
)}複製程式碼

安卓不建議新增 loading 效果，因為沒有準確的事件監聽可以移除，否則只能加上不能移除（安卓支援 loadstart 和 loadeddata，不支援 canplay）

5、關於自動播放的問題：需要觸發一次才可播放；


6、多音訊 audio 實現連續播放：監聽當前音訊播放完成之後，ios 繼續用同一個 audio 播放器物件，替換成新的src播放地址，可以實現連續播放效果；

<audio name="media" id="audio_player" preload>     
    <source :src="audio_url" type="audio/mpeg">
</audio>

var oAudio = document.getElementById('audio_player');
oAudio.src = self.pptData.ppt_list[index].audio_url;
oAudio.play();
複製程式碼


7、設定監聽事件只執行一次，否則會執行多次

addEventListener 第3個引數設定為 { once: true }；

oAudio.addEventListener('play', function () {}, { once: true });複製程式碼


8、監聽微信瀏覽器後臺執行時，禁止播放

$(document).on('visibilitychange', () => {
    var isHidden = document.hidden;
    var oAudio = document.getElementById('audio_player');
    if (isHidden) { // 離開微信瀏覽器，後臺執行
        // 狀態改為暫停
    } else {  // 再次進入瀏覽器
        if (oAudio.paused) { // 鎖屏時點選暫停了
            // 狀態改為暫停            
        } else { 
            // 狀態改為播放
        }          
    }        
})複製程式碼


二、Video

1、在X5核心中讓video標籤播放不自動全屏

只需要給video加上 webkit-playsinline playsinline x5-playsinline 即可（重點是x5-playsinline 起的作用）

<video class="qvideo" id="qvideo-wrap" playsinline webkit-playsinline x5-playsinline>
</video>複製程式碼

注：x5核心-安卓下不能新增airplay="allow" x5-video-player-fullscreen="true" x-webkit-airplay="allow"（新增了之後playsinline屬性就失效了）


2、安卓手機上，視訊層級最高，其它彈窗等會被遮擋；

可在彈窗等出現的時候，視訊高度設定為0；


相關文章