这是我参与2022首次更文挑战的第21天，活动详情查看：2022首次更文挑战
hi 我是小十七_，之前总结过移动端 H5 音视频播放问题，分享给大家～
ios 下不能自动播放音频
ios 下不能自动播放音频，需要用户的动作（touchstart，click）触发
在用户触摸屏幕的时候，播放一下音频，真正需要自动播放的时候才可以播放
music.addEventListener('touchstart', function(){
music.play();
music.pause();
})
如果是微信环境的话：
旧版(不需要引入微信的sdk)
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
新版（引入微信的sdk res.wx.qq.com/open/js/jwe…
文档：mp.weixin.qq.com/wiki?t=reso…
在 wx.ready 里自动播放
config 信息验证后会执行ready方法，所有接口调用都必须在 config 接口获得结果之后，config 是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。
wx.ready(function(){
music.play();
});
视频播放器（videojs），ios上播放会自动全屏
解决：video 标签增加 webkit-playsinline="true" playsinline="true" , 浏览器中生效，不过如果在 App 中还与 App 本身有关，有时仍会自动全屏。
h5 页面高度大于屏幕的页面，视频播放方式与问题
第一种方案
点击直接在页面播放。（问题：播放中的视频在页面上下滑动的时候会出现抖动，并且播放层会浮在详情也就是那个 detailBar 之上）
经查资料，微信对 video 标签会劫持，使播放层脱离文档流，并且 z-index 属性对其不起作用。
webkit-playsinline = "true"
这个属性修改 ios 系统出现的以上问题，但是对安卓无效。作用就是支持视频内联播放，也就是原位置播放
playsinline = "true"
Android 是不支持 playsinline 属性使视频内联播放的。但是，如果你看过一些腾讯的视频类 HTML5，会发现它们在微信里是可以内联播放的，而这个功能是需要申请加入白名单的。
关于安卓同层播放的属性如下： x5-video-player-type="h5" x5-video-player-fullscreen="true"
效果就是在安卓上点击视频回直接大屏播放，但是慢慢向上滑动视频并不会调节声音或亮度，而是视屏的高度会慢慢变小，并且会出现详情栏。这个是什么原因没有找到。
第二种方案
使用蒙层也就是弹框的方式，h5 页面上放的是一张图片，点击后在蒙层中小窗口播放视频（由于第一种方案没有找到好的解决方法所以最终采取的第二种方案）
弹出弹框将视频定位在一个合适的位置上，ios 支持横屏小窗口播放，导致定位的位置不准确，看不到视频。解决方法就是在 onresize 方法中判断是横屏还是竖屏，改变 css 属性。（觉的并不是最好的方法，但是还没找到别的方法）
蒙层下的 h5 页面会滚动
判断不同情况，切换 overflow 的 hidden 和 scroll 属性。
