html5 如何在ios 和安卓端视频全屏Script

• 摘要：先上代码 html部分<divclass="video"><videoid="video1"preloadposter="benzvideoshow/img/0.jpg?201701250033"x5-video-player-type="h5"x5-video-player-fullscreen="true"x-webkit-airplay=&qu
• 先上代码  html部分<div class="video"> <video id="video1" preload poster="benzvideoshow/img/0.jpg?201701250033" x5-video-player-type="h5" x5-video-player-fullscreen="true" x-webkit-airplay="true" webkit-playsinline playsinline="true" src="media/benz1.mp4?201701261153"></video> </div>

  再解释一下对应的属性

  x5-video-player-type
  启用同层播放。取值固定为'h5'
  

  x5-video-player-fullscreen
  是否全屏。取值为'true'或'false'。
  

  x5-video-orientation
  视频方向。取值分别为'landscape'、'portrait'或者'landscape|portrait',分别对应横屏、竖屏及自动旋转(这个应该用的少)。
  

  但是上面对应的只是对应X5浏览器内核,非ios相关平台,下面是ios相关平台的属性

  1. airplay

  2. x-webkit-airplay

  3. playsinline

  4. webkit-playsinline

  扫描二维码关注公众号，回复： 2225818 查看本文章

  其中最后两个是iOS平台下的内联播放属性,都是布尔属性,不需要赋值(存在即是true);前两个是iOS平台下airplay的相关属性(说实话我现在也没搞明白为什么网页需要airplay属性),取值为'allow'或'deny',通常保险起见用'allow'就可以。

  微信在同层接入规范中提到了object-position这个属性,用于设置视频出现的位置。实际在尝试的过程中,搭配object-fit属性同时使用的效果会比较好。但这两个属性并不是x5私有属性,而是原生的,所以它们同时适用于Android和iOS两个平台。

  object-position和object-fit这两个元素主要的作用是为“可替换元素”设置位置和大小。这里的“可替换元素”,指的是内容不受CSS显式控制的元素,比如比较典型的就是<img>、<object>、<video>和表单元素等。

  说回视频播放。微信官方的同层接入规范中推荐的做法,是用js动态计算需要的像素值,然后给object-position属性赋值。而我自己尝试了一圈下来,发现object-position这个属性本身支持百分比取值,通常视频默认的值是'50% 50%',也就是居中;全屏视频一般情况下需要贴底放,所以要把取值改成'0 100%'。

  另一个属性object-fit,有点类似background-size属性,用来设置视频在容器内的填充方式,平时用只需要取值'contain'(保持宽高比填满容器)就可以了。不过这里需要留意的是,全屏下,由于视频一般都不会正好填满屏幕(宽高比差异以及输出分辨率没算顶部标题栏),会在顶部留下一条空隙。这条空隙通常是默认黑色的,如果需要更改颜色,首先要加上个'display:block;'(因为video默认是inline的),然后直接改background-color就OK~

  下面讲一下同层浏览器事件规范

  x5videoenterfullscreen进入全屏通知myVideo.addEventListener("x5videoenterfullscreen", function(){ alert("player enterfullscreen");})

  x5videoexitfullscreen退出全屏通知

  myVideo.addEventListener("x5videoexitfullscreen", function(){ alert("player exitfullscreen");})
  

  使用同层播放器的一些建议

  1. 监听resize 事件实现自适应视口大小变化,视频播放时会调整视口大小

  2. 在视频播放期间的交互,弹框,字幕在视频视频区域中,不要在视频区域外

  3. 对于直播类全屏视频,最好不要在最顶部放交互性元素

  
  
  

  
  

  
  

  
  

以上是html5 如何在ios 和安卓端视频全屏Script的内容，更多 安卓 何在 html5 视频 iOS 的内容，请您使用右上方搜索功能获取相关信息。 上一篇  1