小程序视频播放全屏展示

功能跟抖音界面一样那种全屏显示

1.首先我们要将页面是全屏的，小程序是自带头部导航的所以要去掉
这里我们就要自定义导航

当自定义导航 我们不做样式 这样页面会是全屏的

在json文件中

{
     
  "navigationStyle": "custom",//这是自定义导航
  "enablePullDownRefresh": false,//是否开启当前页面下拉刷新。
  "disableScroll":true,//设置为 true 则页面整体不能上下滚动。只在页面配置中有效，无法在 app.json 中设置
  "usingComponents":{
     
    "toast-down":"../../components/ToastDown/ToastDown"
  }
}

2.video

 <video
    id="myVideo"
    src="{
     {videoUrl}}"
    loop='true'
    controls='{
     {controls}}'
    show-fullscreen-btn='{
     {controls}}'
    autoplay="true"
    object-fit='{
     {videoMoel}}'
    bindtap='videoTap'
  >
  //

object-fit 这个属性很重要 不然你的视频宽高 还是显示不是全屏 上下会有黑边 所以你要根据自己的视频大小 改变object-fit的值 这样你的视频才会填充全屏 如果是横屏的短视频 上下黑边是很正常的

src :要播放视频的资源地址，支持网络路径、本地临时路径、云文件
loop :是否循环播放
controls :是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
show-fullscreen-btn :是否显示全屏按钮
autoplay :是否自动播放
object-fit :当视频大小与 video 容器大小不一致时，视频的表现形式


微信开发文档 https://developers.weixin.qq.com/miniprogram/dev/component/video.html