1. mobile内联播放
内联播放指的是视频在文档流中直接进行播放，不会弹出新的播放窗口的方式。
<video id="video"
style="object-fit:fill"
preload="auto"
webkit-playsinline="true"
playsinline
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x5-video-orientation="portraint"
src="video.mp4" >
</video>| 属性 | 值 | 含义 |
|---|---|---|
| object-fit | fill 或 cover或 contain… | 视频填充模式，这三个最常用，fill会被拉伸，可以在css文件中设置。 |
| preload | auto 或 metadata 或 none | 该属性在某些情况下被忽略 |
关于视频还有很多属性，请参考：
http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
http://www.runoob.com/tags/ref-av-dom.html
剩下几个属性才是内联播放的关键，在下文中详细介绍：
(1) webkit-playsinline和playsinline
在手机浏览器和QQ等App中播放H5视频，系统会自动接管进行全屏播放。显然，在很多场景中，我们需要在H5的页面中进行播放，则需要加上webkit-playsinline，在iOS10之后需要加上playsinline。所以，建议同时加上这两个属性。
(2) android微信
按照上述属性设置之后，大多数情况都可以满足，唯独android的微信。它使用的是腾讯x5内核，不遵循X5web标准，会强制全屏。
这个是腾讯H5同层播放器接入规范：
https://x5.tencent.com/tbs/guide/video.html
x5-video-player-type="h5"启用Ｈ5同层播放器
x5-video-player-fullscreen="true"视频播放时将会进入到全屏模式。
x5-video-player-fullscreen="portraint"声明播放器支持的方向，此属性只在声明了x5-video-player-type=”h5”情况下生效。
在其他资料中，常常到这里就结束了。亲测根本没有办法实现。播放时，上下都是黑色，视频在中间。
根据腾讯的X5同层播放器试用报告：
https://x5.tencent.com/tbs/guide/web/x5-video.html才找到了实现方式。
【强烈推荐这篇文章】还讲解了如果增加topbar等问题。
接下来，通过这篇文章提供的方法继续。
按照官方文档所述，只要修改video元素的「object-position」属性，就可以修改视频部分的显示位置，但实际上还要把video元素的宽高设成屏幕的宽高才行。
官方提供了两个事件回调：
x5videoenterfullscreen进入全屏通知x5videoexitfullscreen退出全屏通知
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>android wechat playsinline</title>
<style>
body{
margin: 0
最低0.47元/天 解锁文章
913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
