H5移动端音视频开发遇到的一些问题小结

最新推荐文章于 2021-08-11 16:04:23 发布

原创

最新推荐文章于 2021-08-11 16:04:23 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#h5 #兼容 #音视频

本文总结了H5移动端在Android和iOS平台进行音视频开发时遇到的若干问题，包括：视频和音频不能同时播放，无法自动播放，touchend事件的兼容性，全屏处理，倍速播放支持，以及格式兼容性等。针对这些问题，提出了相应的解决方案，如使用click代替touchend，添加特定属性来改善全屏和播放体验。

文章目录

Android
ios
结语

Android

1.video和audio不能同时播放

经测试，音视频是不能同时播放的，音频可播放多个，如果有此类qipa需求的建议改掉吧。

2.音视频始终不能自动播放，需触发

3.touchend事件支持不友好，最好用click

在使用swiper的时候，手机滑动效果在安卓上会卡顿。
使用原生js写滑动，安卓依然会存在卡顿或者不起效的情况

4.全屏处理

微信端加上 x5-video-player-type=“h5”，这属性还可隐藏播放控件
加上playsinline

 <div class="videobox" ontouchmove="return false;">
    <video id="myvideo" src="v.mp4" x5-video-player-type="h5" playsinline webkit-playsinline></video>
</div>