H5 video 适配问题

今天偶然遇到一个技术贴介绍H5中嵌入视频的适配问题解决方案,虽然目前还没有接触到这种项目,但是这种互动是目前比较火的形式,ios和安卓也有各种适配问题,嵌入的视频最好上传到腾讯视频上,否则后面会有推送广告,具体代码:

<video
  id="videoALL" 
  src="video/01.mp4" 
  poster="images/1.jpg" /*视频封面*/
  preload="auto" 
  webkit-playsinline="true" /*这个属性是ios 10中设置可以
                     让视频在小窗内播放,也就是不是全屏播放*/  
  playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ 
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  /*启用H5播放器,是wechat安卓版特性*/
  x5-video-player-fullscreen="true" /*全屏设置,
                     设置为 true 是防止横屏*/>
  x5-video-orientation="portraint" /*播放器支付的方向,
                     landscape横屏,portraint竖屏,默认值为竖屏*/
  style="object-fit:fill">
</video>

欢迎分享本文,转载请保留出处:前端ABC » H5 video 适配问题

赞 (1)
分享到:更多 ()

发表评论 0