微信小程序如何制作全屏视频



  • 公司项目需要制作全屏沉侵式体验的播放效果,当时video没法全屏播放怎么办



  • 新建一个页面,将页面的导航条去掉

    以页面名称为 page 举例

    在小程序page.json 中加上下方的描述

    {
        "navigationBarTitleText": "全屏播放页面",
        "navigationStyle": "custom", // 使用自定义导航条
    }
    

    page.wxml

    <video src="https://xxx.com/xxx.mp4"></video>
    

    在page.css中将video的宽高设置成为100%即可

    video {
        width: 100vw;
        height: 100vh;
    }
    

Log in to reply