抖音的h5页面怎么做的啊（怎么使video标签在诸多浏览器，手机上都表现一致）？

随意开启一个抖音短视频的页面手机浏览器 video标签，使用开发者工具获得到视频元素的代码，如下：

<video
id="theVideo"
class="video-player"
preload="auto" src="http://xxx"
type="video/mp4"
width="100%" 
webkit-playsinline="true"
playsinline="true"
x5-video-player-type="h5"
x5-video-player-fullscreen="portraint">
</video>

为了适配 iOS 与安卓平台，最后四个属性起到关键作用，

webkit-playsinline="true" playsinline="true" 作用与 iOS 系统，使用 playsinline 让用户能够全屏播放视频，不带 control 属性，去掉了平台自带的控件，方便为客户提供自己编写的播放器控件，使得不同系统体现一致。

x5- 开头的两个属性，作用于安卓平台，因为安卓系统的微信浏览器内核为 X5手机浏览器 video标签，

x5-video-player-type="h5" x5-video-player-fullscreen="portrait" 是两个比较通用的配置，让视频以竖屏的同层模式播放。

具体可以参考

腾讯浏览服务-H5同层播放器接入规范

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-143152-1.html