您的位置 模块帮助H5页面视频使用总结v1

H5页面视频使用总结v1

H5页面内播放 

<video v-if='isShowVideo' id="myvideo" ref='video' x5-playsinline="x5-playsinline" x-webkit-airplay="allow" preload="auto" controlslist="nodownload" webkit-playsinline="true" controls="controls" playsinline="true" src="视频地址">video>

微信H5全屏 

<video id="myVideo" x5­-video­-player­-fullscreen='true' x5-video-player-type="h5" src="视频地址" style="object-fit: fill;">video>

x5-playsinline="x5-playsinline"
x-webkit-airplay="allow"
controlslist="nodownload" // 不要下载
webkit-playsinline="true" // iso 10 中让视频在小窗口播放，不是全屏播放
playsinline="true" // IOS微信浏览器支持小窗内播放

x5-video-player-fullscreen="true" // 全屏设置，设置为 true 是防止横屏
x5-video-player-type="h5" // 启用H5播放器,是wechat安卓版特性

在微信H5中，页面内视频播放会覆盖弹层，解决方案：在弹层出现时，先将video标签删除或隐藏，当弹层隐藏时，再将video标签显示或插入到页面中

controlslist的其他参数：
nodownload // 禁止下载
nofullscreen // 禁止全屏
noremoteplayback // 禁止远程回访（测试未发现效果）
防止右键下载，可以增加oncontextmenu="return false";

相关问题

餐厅介绍

自助餐厅

4.7分
537m | 中航城区冷死你境内呢名
停车 WiFi
查看更多评论（64条）

用户评论

  • 热情1
  • 环境好11
  • 服务好12
  • 好极了31
  • 服务热情14

暂时没有看法.. 发表看法请遵守当地法律和制度 (网友评论仅供其表达个人看法，并不表明本站立场。)