大错社区

 找回密码
 免费注册

QQ登录

只需一步,快速开始

[开发] html5阻止video的默认全屏播放

[复制链接]
admin 发表于 2018-10-25 16:20:39 | 显示全部楼层 |阅读模式
video标签中加几条属性x5-playsinline="" playsinline="" webkit-playsinline=""可以解决移动端video点击播放自动全屏问题
  1. <video id="video1"   playsinline  -webkit-playsinline webkit-playsinline width="100%" height="100%" src="https://st-up.meiyaapp.com/2016/11/28/o_1b2kqd7en5pu6h5o2b1qba1a3m3g99080.mp4"></video>
复制代码
弄了挺久,在看iphone-inline-video这个插件的时候找到了一个方法。有用了,换了一个属性,ios微信里总算不会跳全屏了。好评五星。

  1. <!--
  2.   object-fit: fill   视频内容充满整个video容器
  3.   poster:"img.jpg" 视频封面
  4.   autoplay: 自动播放
  5.   auto - 当页面加载后载入整个视频
  6.   meta - 当页面加载后只载入元数据
  7.   none - 当页面加载后不载入视频
  8.   muted:当设置该属性后,它规定视频的音频输出应该被静音
  9.   webkit-playsinline playsinline:   内联播放
  10.   x5-video-player-type="h5" :  启用x5内核H5播放器
  11.   x5-video-player-fullscreen="true"  全屏设置。ture和false的设置会导致布局上的不一样
  12.   x5-video-orientation="portraint" :声明播放器支持的方向,可选值landscape 横屏,portraint竖屏。
  13.                                      默认值portraint。无论是直播还是全屏H5一般都是竖屏播放,
  14.                                      但是这个属性需要x5-video-player-type开启H5模式
  15. -->
复制代码
  1. <video
  2. id="videoID"
  3. src="video.mp4"
  4. poster="loadbg.jpg" 视频封面
  5. preload="auto"
  6. x-webkit-airplay="allow"
  7. x5-video-player-type="h5" 启用H5播放器,是wechat安卓版特性
  8. x5-video-player-fullscreen="true" 全屏设置,设置为 true 是防止横屏
  9. x5-video-orientation="portraint" 播放器支付的方向,landscape横屏,portraint竖屏,默认值为竖屏
  10. webkit-playsinline="true" 这个属性是ios 10中设置可以让视频在小窗内播放,也就是不是全屏播放
  11. playsinline="true" IOS微信浏览器支持小窗内播放
  12. style="object-fit:fill">
  13. </video>
复制代码
您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

QQ|Archiver|手机版|小黑屋|大错网络

GMT+8, 2019-5-20 20:42 , Processed in 0.053106 second(s), 21 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表