关于android:HTML5-Audio-Video-兼容性总结一

6次阅读

共计 2203 个字符,预计需要花费 6 分钟才能阅读完成。

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

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

本文转自 https://juejin.cn/post/6844903839825395719,如有侵权,请分割删除。

正文完
 0