video使用

<video class="video_box" width="100%" height="100%" webkit-playsinline="webkit-playsinline" x5-playsinline="x5-playsinline" x5-video-player-type="h5" x5-video-player-fullscreen="" playsinline="playsinline" preload="auto" poster="https://xxx/poster.png" src="https://xxx/video.mp4" playOrPause="playOrPause" x-webkit-airplay="allow" x5-video-orientation="portrait" loop="loop">

video属性

  • webkit-playsinline ios 小窗播放,使视频不脱离文本流,安卓则无效微信内置x5内核
  • x5-video-player-type=“h5” 启用H5播放器,是wechat安卓版特性,添加此属性,微信浏览器会自动将视频置为全屏
  • x5-video-player-fullscreen=“true” 全屏设置,设置为 true 是防止横屏
  • x5-video-orientation 控制横竖屏 landscape 横屏,portrain竖屏; 默认portrain
  • x5-playsinline="" 使安卓实现h5同层播放,实现与ios同样效果,但兼容部分机型
  • poster:封面
  • src:播放地址
    h5中video默认不能自动播放(ios)在播放之前要先触发一次屏幕操作
document.addEventListener('touchstart', () => {
  try{
	video.load();
  	video.play();
  	video.pause();
  }catch(e){}
},true)

在触发之后再执行 play or pause

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值