工作中的总结和记录，第一次写，有问题烦请指出，会继续记录更新...
一、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，如有侵权，请分割删除。