h5 video播放器遇到的坑

h5 video播放器遇到的坑

1.在安卓webview中默认全屏播放解决方法

• 此属性需要在播放前设置好，播放之后设置可能会无效
• 如果使用video播放音频文件的话，安卓会出现黑屏并且无法播放的状况，所以要进行判断，播放音频的时候不需要加此属性

    video.attr('x5-video-player-type', 'h5')  // 启用同层H5播放器

2.在ios webview中会默认全屏播放,并且在6p等部分机型中无法播放

解决了安卓的问题，本以为大功告成，结果又有问题，我摸索着修改了很多属性调试了很久，再怎么样就是播放不了，后来收集了onerror的报错信息之后，找ios开发加上如下属性

    webview.allowsInlineMediaPlayback = YES; // 允许内联播放
    webView.mediaPlaybackRequiresUserAction = NO; // 允许点击后播放video，注：（在wkwebview中不知道需不需要加，我用的UIwebview）

3.设置ios在微信端内联播放，给video加上如下属性，安卓不支持以下属性

    <video playsInline='true' webkit-playsinline='true'></video>

4.在安卓微信端内联播放，背景：android微信内置浏览器采用腾讯X5内核，不遵循X5web标准，video强制全屏

• 此属性需要在播放前设置好，播放之后设置可能会无效

    let video = $('#video')
    video.attr('x5-playsinline', true)  // 启用x5内联播放

5.UC浏览器中（ios系统），不支持使用video播放mp3文件

• 之前以为是其他原因播放不了，后来亲测使用audio是可以的播放的，所以虽然video支持播放音频文件，但是为了避免各种坑，以后在项目中还是做个判断，音频文件就使用audio

6.退出h5页面，音频或者视屏还在播放

• 目前只能在事件中手动关闭播放
• 或者监听页面离开的时候关闭

7.在一些安卓自带浏览器中，播放时系统播放器会接管播放，导致样式都是系统的，还可能会全屏，目前无解

8.video的其他属性

• x-webkit-airplay=“allow” 通过AirPlay可以把当前的视频投放到支持此技术的其他设备上。
• x5-video-player-fullscreen=“true” 视频播放时将会进入到全屏模式
• x5-video-orientation 控制横竖屏，可选值： landscape 横屏，portrain竖屏； 默认portrain