随着抖音、快手等视频APP的火爆，手机端的h5视频应用也在兴起，使用视频播放的场景越来越多。本文主要举例说明手机视频播放的一些场景和个人在开发过程中遇到的一些问题。希望开发者在阅读本文后能够快速开发，减少在移动端使用视频播放时的误区。全屏播放视频全屏播放在移动端是很常见的场景，所以我们需要给视频设置全屏播放。全屏播放使用的方法是requestFullscreen()。另外，考虑到浏览器兼容性问题，需要加入兼容性代码：()}elseif(ele.webkitRequestFullScreen){ele.webkitRequestFullScreen()}ele.play()获取视频元素节点，然后判断不同浏览器的requestFullscreen属性，调用不同的请求全屏方法，从而保证视频的全屏播放。视频可以在浏览器下全屏播放吗？因为在微信下，你可以选择使用原生浏览器内核渲染视频，也可以启用腾讯的x5内核渲染。有什么不同？如果使用原生渲染，和普通浏览器渲染一样，但是如果开启腾讯x5内核渲染，视频播放时x5内核会强制视频全屏播放，目前不支持ios，我们看看微信x5内核的全屏播放显示x5内核的同层播放。通过将x5-video-player-type="h5"属性添加到video标签来启用x5内核，并启用x5内核来渲染视频。虽然视频会全屏播放，但这也提供了更好的同时，x5内核渲染的另一个好处是支持同层渲染。播放视频时，图层不再是最上层，元素可以悬浮在视频上方。大概效果如下：WechatIMG310.jpeg如上图所示，这是一个全屏视频，在视频上面叠加了一个透明的浮层，但是很明显有黑边的时候播放视频，那是因为没有声明x5-video-player-fullscreen，如果不声明该属性，页面获取视口区域为原始视口大小（视频未播放前），比如微信中，会有一个永久的标题栏，如果不声明该属性，标题栏的高度不会赋予页面，播放时会平分两部分（上下黑块）。设置属性后的效果图如下：WechatIMG312。此时视频的宽高不是动态计算的单位，需要重新分配视频的宽高：window.onresize=function(){test_video.style.width=window.innerWidth+"px";test_video.style。height=window.innerHeight+"px";}playsinline想在微信浏览器下使用x5核心渲染，又不想强制全屏播放怎么办？这时候就需要playsinline属性了。该属性还可以解决其他一些手机浏览器强制全屏播放的问题。只需要设置playsinline="true"和webkit-playsinline="true"声明即可，但是在x5下的Rendering中，也就是说android下要使用x5渲染，肯定是全屏播放duration，获取视频的时长，但是这个属性在android和ios下有点不同。在android中，会在视频加载完成后触发，获取相应的视频信息，而在ios下，这个事件视频是在微信浏览器中加载的。完成后不会触发，点击播放后会触发，但在safari浏览器中视频加载完成后会触发。canplay这个事件是指当媒体数据有足够的数据（至少有几帧可以播放）播放时触发，android下加载视频时会触发这个事件，但是播放完视频后会触发autoplay在iOS中。android中的autoplay属性只有在chrome浏览器中同时设置了autoplay和muted才能自动播放。其他浏览器不支持自动播放视频，如果在安卓微信浏览器中同时设置自动播放和海报属性，海报属性也会失效，无法显示视频封面。在ios移动端，autoplay不能直接自动播放，但是在macsafari中给video设置autoplay和muted属性可以自动播放。这与我在网上看到的文章有点不同。MDN上有一张视频属性支持表：总结随着移动流量时代的到来，随着新时代的到来，移动端互联网体验的优化，更多的视频播放场景和需求将承载在移动端。但由于浏览器内核和系统的限制，在移动端播放视频的性能存在差异，因此需要开发。工作人员花时间和精力来处理这样的问题。希望本文能对大家在移动端使用video标签时有所帮助。如有错误或不严谨的地方，欢迎批评指正。如果你喜欢它，请喜欢它。
