最近做了一些网页，里面嵌入了很多小视频。在ios和安卓手机上播放时，遇到很多问题：在微信浏览器播放时，视频会自动全屏解决方法：给video标签添加一些属性，调用h5原生视频，我写了一个例子，加了注释，如有错误，请指正，谢谢！如果你的video标签也加上了上面的属性，那么你的视频就可以在小窗口上播放了IOS手机，同时视频封面和视频的宽高也保持一致。经过多方尝试，iOS下可以给视频添加webkit-playsinline属性，让视频在页面原位置播放，但Android上该属性无效。/华丽的分割线，以下内容摘自网络，供参考/IOS微信浏览器是Chrome内核，支持以下大部分属性。安卓微信浏览器是X5内核，部分属性不支持。例如，你可以设置本地的播放属性playsinline，因此，总是全屏的。下面内容用于解释以上内容：preload="auto":该属性指定在页面加载后加载视频。如果设置了自动播放属性，则忽略此属性。一般参数的可能值：auto-页面加载时加载整个视频meta-仅在页面加载时加载元数据none-页面加载时不加载视频muted：设置此属性时，它指定了video'saudiooutputshouldbemutedcontrols="controls":属性指定浏览器应该为视频提供播放控制。autoplay="autoplay"：视频自动播放设置，但有经验的人应该都知道autoplay标签在手机上是不兼容的，而且APP中的设置问题导致无法自动播放，不管是安卓还是IOS。需要模拟自动播放只能由某些事件触发。webkit-playsinlineplaysinline：播放视频时，在本地播放，不脱离文档流。但是这个属性比较特殊，需要嵌入到网页APP中，比如微信中UIwebview的allowsInlineMediaPlayback=YESwebview.allowsInlineMediaPlayback=YES，才能生效。也就是说，如果APP没有设置，在你的页面上加这个标签是不会生效的，这就是为什么安卓手机微信播放视频总是全屏的原因，因为APP不支持内联播放，而ISO上的微信支持。在这里补充一下，如果要做全屏直播或者全屏H5体验，需要设置iso去掉webkit-playsinline标签，因为设置false是不支持的，安卓不需要它，因为默认是全屏。但是此时全屏有播放控件，不管你有没有设置控件。直播可能需要播放控件，但不需要全屏H5，所以去掉全屏播放控件，需要做如下设置：同层播放。x5-video-player-type：开启同层H5播放器，即视频全屏时，div可以显示在视频层，这也是安卓版微信特有的属性。同层播放的别名也叫沉浸式播放。播放时看起来是全屏，但是控件和微信导航栏都被去掉了，只剩下“X”和“<”按钮。目前同层播放器仅支持安卓（包括微信），暂不支持iOS。笔者有想过为什么同层播放只对安卓开放，因为安卓不能像ISO一样在本地播放，默认的全屏会挡住一些界面操作。如果是全面屏H5还好，但是对于直播来说，弹幕等功能是无法实现的，所以此时同层播放的概念就解决了这个问题。不过笔者在测试的过程中发现，不同版本的ISO和Android的效果略有不同。x5-video-orientation：声明播放器支持的方向，可选值为横屏为landscape，竖屏为portraitt。默认值是肖像。不管是直播还是全屏，H5一般都是竖屏播放，但是这个属性需要x5-video-player-type开启H5模式x5-video-player-fullscreen:全屏设置。作者尚未理解此标签的意图。测试的时候发现设置true和false会导致不同的布局，如图中Click标签的位置。另外，ISO微信浏览器是Chrome的核心，所有相关属性都支持，这也是X5不支持同层播放的原因。安卓微信浏览器基于X5内核，不支持playsinline等一些属性标签，所以一直全屏。/看到这里，明白为什么安卓手机全屏视频了/还是有问题，在安卓的微信里，即使加上了上面的属性，还是会出现上下黑边，以及无法全屏的问题。解决方法：添加object-fit:fill;视频的样式属性。/关于微信内置浏览器无法小窗播放视频的问题-知乎/在最新的ios微信6.5.3及之后的版本中，webview默认支持小窗播放，开发者需要特别注意小窗播放需要前端同时适配iOS10及iOS10以下版本适配建议：需要完全按照以下代码设置video标签才能同时兼容不同iOS版本
