阅读 1024

HTML5 Audio & Video - 兼容性总结(一)

工作中的总结和记录,第一次写,有问题烦请指出,会持续记录更新...

一、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;


关注下面的标签,发现更多相似文章
评论