html5在android和ios中实际应用中遇到的问题的解决方法以及在html5中video与android和ios兼容问题的解决方法IOS一直是个大问题。一样，体验差。这段时间在播放html视频的时候，要求全屏显示，真是各种毛病。下面我们就来看看这个项目中遇到的手机兼容性问题以及相应的解决方案。在查资料的过程中，发现视频还是有很多兼容性问题。我会列出视频播放的一般场景和每个场景踩过的坑。希望在需求开发的时候，能够针对合适的场景选择合适的。技术解决方案。如果有相关的补充，欢迎大家补充。1.首先了解视频相关属性srcvideoaddressposter允许用户控制视频播放，包括音量、跨帧、暂停/恢复播放。controls属性指定视频下载时显示的图片，或者用户点击播放按钮前显示的图片preload加载视频后页面加载webkit-playsinline&&playsinline播放视频时本地播放，不脱离文档流。但是这个属性比较特殊，需要嵌入到网页APP中，比如微信中UIwebview的allowsInlineMediaPlayback=YESwebview.allowsInlineMediaPlayback=YES，才能生效。也就是说，如果APP没有设置，在你的页面上加这个标签是不会生效的，这就是为什么安卓手机微信播放视频总是全屏的原因，因为APP不支持内联播放，而ISO上的微信支持。x-webkit-airplay这个属性应该可以让这个video支持ios的AirPlay功能。使用AirPlay可以在使用iOS的设备上直接播放不同位置的视频、音乐和照片文件，也就是说可以通过AirPlay功能实现音视频文件的无线播放，当然前提是终端要播放的设备也必须支持相应的功能x5-video-player-type启用同层的H5播放器，即视频全屏时，div可以在视频层呈现，这也是一个安卓版微信独有的属性。同层播放的别名也叫沉浸式播放。播放时看起来是全屏，但是控件和微信导航栏都被去掉了，只剩下“X”和“<”按钮。目前同层播放器仅支持安卓（包括微信），暂不支持iOS。至于为什么同层播放只对安卓开放，是因为安卓不能像ISO一样在本地播放。默认全屏会屏蔽一些界面操作。如果是全面屏H5还好，但是对于直播来说，弹幕等功能是无法实现的，所以此时同层播放的概念就解决了这个问题。不过在测试的过程中，发现IOS和Android不同版本的效果略有不同。Android效果图——如图x5-video-orientation声明了播放器支持的方向，可选值为横屏为landscape，竖屏为portrait。默认值是肖像。不管是直播还是全屏，H5一般都是竖屏播放，但是这个属性需要x5-video-player-type开启H5模式x5-video-player-fullscreen全屏设置。它有两个属性值，true和false，true支持全屏播放，false不支持全屏播放。事实上，IOS微信浏览器是Chrome的核心，所有相关属性都支持，这也是X5不支持同层播放的原因。安卓微信浏览器基于X5内核，不支持playsinline等一些属性标签，所以一直全屏。2、常用场景全屏处理自动播放。播放控件被隐藏。设置视频播放控制栏。视频封面是空白的。在某些型号上，视频再次播放时会变黑，没有图像，只有声音。弹窗...后续问题会逐步完善...Webview对视频原生标签的支持（出现过闪退现象）。播放多个视频时会出现黑屏？？如何让视频和音频同时播放的兼容性更好？？1.自动播放在Android和IOS早期，需要用户手势自动播放。后期逐渐放宽自动播放策略，逐渐开始支持自动播放。当然，在不同的安卓微信手机和对应的浏览器上显示略有不同，这还不是很清楚，所以模型显示了这种情况。PC端浏览器的具体情况不同。这个没有深入研究。如果有坑，欢迎大家补充。真正的方法是检测当前浏览器是否支持自动播放，示例代码：varpromise=document.querySelector('video').play();if(promise!==undefined){promise.then(()=>{//视频可以播放}).catch(err=>{//视频不能播放})}不同的应用程序显示情况略有不同。钉钉可以支持，微信禁止，但是自己提供了内置事件支持自动播放，示例代码：document.addEventListener('WeixinJSBridgeReady',function(){music.play()},false)2.它全屏这个不难处理，安卓和IOS，在微信环境下打开，默认应该是全屏（不是视频占整个手机全屏，而是占机身内窗口）安卓全屏效果，没有顶部导航栏，只有“>”和“...”，【效果如下】：IOS会直接开启全屏模式。效果如下：IOS非全屏显示。对AndroidIOS效果图无影响-如图：但是有时候不想全屏显示，只需要添加webkit-playsinline&&playsinline，视频播放不脱离文档流,并进行部分播放。对于Android，有“...”。如果安装了QQ浏览器，可以小窗播放，悬浮在页面顶部。这种现象符合条件，但无法消除。这个还是没法解决，不过一般还是有少部分用户这样操作的。3.播放控制video元素提供了多种行为事件供开发者控制视频播放。onended、ontimeupdate、onplay、onplaying等兼容性较好，部分事件在不同浏览器、不同设备上表现不一致。不同的系统、设备和浏览器显示出截然不同的特性。这取决于业务场景需要如何兼容。尽量不要大量处理这些事件，否则用户浏览时会出现很多兼容性问题。我处理的基本上是Android和IOS进入全屏、退出全屏、暂停和停止这四个事件，其中进入全屏和退出全屏需要针对Android和IOS进行不同的处理。Android监听进入全屏事件：jsvideo.addEventListener("x5videoenterfullscreen",()=>{console.log("进入全屏通知");})jsvideo.addEventListener("x5videoexitfullscreen",()=>{console.log("退出全屏通知");})IOS监听进入全屏事件：jsvideo.addEventListener("webkitbeginfullscreen",()=>{console.log("进入全屏通知");})jsvideo.addEventListener("webkitendfullscreen",()=>{console.log("退出全屏通知");})监听暂停事件jsvideo.addEventListener('pause',()=>{console.log('paused')})监听停止事件jsvideo。addEventListener('ended',()=>{console.log('stopped22')})4.隐藏视频播放控制栏的主事件来了。相信这个问题已经困扰了无数前端开发者，再搜索这个解决问题的时候，几乎所有的文章都告诉你在android下，播放器控件是不能去掉的。其实好像确实是这样，只是后面android下没有controlbar。当初看到那些H5视频的时候，并没有看出他们的内容有多新颖，传播的有多广。第一次测试android下的兼容性问题，发现没有出现控制栏。研究了半天没成功，在一个技术贴里看到：因为是腾讯自己的项目，微信是腾讯自己的，他们在浏览器做了一些配置，对自己出的H5有“优待”他们，以保证视频的顺利“伪装”。上面的说法我还没有真正验证过，但是你可以用css来操作。我实现的方式是在视频外层包裹一个div，设置高度为100%并设置overflow:hidden，视频大于100%，让控件bar顶出窗口.这也算是视觉隐藏了（惊喜万分~）。这时候视频可能会被放大，视频中要留出一定的安全区域，防止主要内容被遮挡。对于用户体验来说，没有控制条的长视频是不合适的。当然，这只是一个想法。具体情况取决于哪种形式的产品是合适的。5.视频设置封面出现空白现象说明：设置海报在不同设备上表现不同。浏览器没问题，但是微信浏览器和IOS就显示空白。显示效果为：单个播放按钮显示在一张白纸上。解决方法：解决方法一：如果视频合成有封面图，自定义一个div，把封面放在div里面，然后把div放在视频上面。方案二：如果没有封面图，通过canvas截取视频的第一帧作为默认图。varcut=function(){//1.创建画布letcanvas=document.createElement("canvas");canvas.width=video.videoWidth*scale;//2.设置纵横比canvas.height=video.视频高度*比例；//3.将视频的当前帧号绘制到画布上canvas.getContext('2d').drawImage(video,0,0,canvas.width,canvas.height);让img=document.createElement("img");img.src=canvas.toDataURL("图片/png");//4.写入DomDom.appendChild(img);};video.addEventListener('loadeddata',cut);//在加载完视频帧数后进行拦截。6.部分机型再次播放视频时，会黑屏，没有图像，只有声音。将出现黑屏。查看代码后发现视频使用了v-show。关闭后执行相应的方法，但是只有声音没有图像。为什么？？？解决方法：解决方法一：尝试加入代码webkit-playsinline&&playsinline保证不会再次黑屏，但是IOS的自动全屏无效。心想：可是为什么会这样呢？？这不太合逻辑。仔细看了代码，发现外面有个v-show（代码如代码一）。我想可能是这个原因造成的。第二次用的时候，会不会是IOS12.*以下的手机有兼容性问题，所以没有用v-show处理，只用css处理，可以保证IOS全屏打开视频，再次打开不会黑屏。根本原因仍有待调查。方案二：不使用v-show处理，只使用css做兼容性处理（代码如代码二）代码段1：
