HTML5 Audio & Video - 兼容性总结（一）
原创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；
本文转自 https://juejin.cn/post/6844903839825395719，如有侵权，请联系删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。