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

文章目录

  • Android
    • 1.video和audio不能同时播放
    • 2.音视频始终不能自动播放,需触发
    • 3.touchend事件支持不友好,最好用click
    • 4.全屏处理
    • 5.不支持倍速播放属性playbackRate
    • 6. 不支持canvas画video
    • 7. 支持video的MP4和WEBM格式(2.3版本以上)
    • 8. 支持audio的MP3,ACC和wav格式
  • ios
    • 1.音视频不能自动播放,需要触发事件
    • 2.浏览器视窗内的全屏处理
    • 3.airplay功能
    • 4.Safari只支持video的MP4格式
    • 5. 支持audio的mp3,aac,wav和mp4格式
  • 结语

Android

1.video和audio不能同时播放

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

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

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

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

4.全屏处理

  1. 微信端加上 x5-video-player-type=“h5”,这属性还可隐藏播放控件
  2. 加上playsinline
 <div class="videobox" ontouchmove="return false;">
    <video id="myvideo" src="v.mp4" x5-video-player-type="h5" playsinline webkit-playsinline></video>
</div>

5.不支持倍速播放属性playbackRate

6. 不支持canvas画video

context.drawImage(video,0,0,canvas.width,canvas.height)

7. 支持video的MP4和WEBM格式(2.3版本以上)

8. 支持audio的MP3,ACC和wav格式

ios

1.音视频不能自动播放,需要触发事件

  1. iOS10后版本的safari和微信禁止了自动播放音频,为用户流量着想~呵呵,所以只能引导用户去触发,监听touchstart事件还是很好用的,一般只执行一次,所以可以呀JQ的one方法
    // 通用做法
    $(document).one('touchstart',function(){
    	$('video')[0].play();
    	$('audio')[0].play();
    });
    // ios微信端 嵌入webview全局的这个事件触发后,视频可自动播放
    document.addEventListener("WeixinJSBridgeReady", function (){ 
        video.play();
        video.pause();// 播放又暂停可以让视频处于加载状态,为后面流畅播放做准备
    }, false)
    

2.浏览器视窗内的全屏处理

  1. 加playsinline 属性
    <video id="myvideo" src="v.mp4" playsinline webkit-playsinline></video>
    

3.airplay功能

  1. 加上x-webkit-airplay="allow"标签属性
    <video id="myvideo" src="v.mp4" x-webkit-airplay="allow"></video>
    

4.Safari只支持video的MP4格式

4.1. ios端下载的Chrome浏览器是可以支持Ogg,MP4和WebM格式的 

5. 支持audio的mp3,aac,wav和mp4格式

结语

暂且先就这样吧,有新问题时再来更新,此文仅权当做笔记了。

你可能感兴趣的:(h5,vedio)