控制 video 标签的控制栏组件(隐藏、显示进度条、播放按钮、全屏按钮等)

本文介绍如何使用CSS隐藏HTML video标签中的特定控件,如全屏按钮、播放按钮、进度条等,提供定制化的播放器界面。
该文章已生成可运行项目,

当 video 标签添加上 controls 属性时,页面上会显示出所有的控制组件。若有些组件不需要只需要在css中设置相关属性把它隐藏掉即可。

<video controls></video>

 

	//全屏按钮
    video::-webkit-media-controls-fullscreen-button {
        display: none;
    }
    //播放按钮
    video::-webkit-media-controls-play-button {
        display: none;
    }
    //进度条
    video::-webkit-media-controls-timeline {
        display: none;
    }
    //观看的当前时间
    video::-webkit-media-controls-current-time-display{
        display: none;            
    }
    //剩余时间
    video::-webkit-media-controls-time-remaining-display {
        display: none;            
    }
    //音量按钮
    video::-webkit-media-controls-mute-button {
        display: none;            
    }
    video::-webkit-media-controls-toggle-closed-captions-button {
        display: none;            
    }
    //音量的控制条
    video::-webkit-media-controls-volume-slider {
        display: none;            
    }
    //所有控件
    video::-webkit-media-controls-enclosure{ 
        display: none;
    }

 

该文章已生成可运行项目
### 微信小程序 `video` 组件全屏控制 API 的使用方法 在微信小程序中,`<video>` 组件提供了多种属性和事件来支持视频的播放控制,其中包括全屏模式的相关操作。以下是关于如何实现 `<video>` 标签全屏控制的具体说明。 #### 属性设置 为了使 `<video>` 组件能够正常进入或退出全屏状态,需配置其相关属性。常用的属性如下: - **controls**: 设置为 `false` 可隐藏默认控件(如播放按钮进度条),以便自定义界面[^1]。 - **enable-progress-gesture**: 是否允许拖动改变播放位置,默认值为 `true`。 - **fullscreen**: 表示当前是否处于全屏状态,此属性由系统自动维护[^3]。 #### 方法调用 通过绑定事件并调用特定的方法可完成对全屏行为的操作。主要涉及以下两个重要函数: - **requestFullScreen()**: 请求将视频切换到全屏显示模式。 - **exitFullScreen()**: 让视频全屏返回至普通窗口大小展示。 下面给出一段完整的示例代码用于演示上述功能: ```javascript // index.js 文件部分逻辑处理 Page({ data:{ src:"https://example.com/sample.mp4", // 假设这是你的视频文件地址 isPlaying:false, screenMode:'normal' }, handlePlay(){ this.setData({isPlaying:true}); const context=wx.createVideoContext('myVideo'); if(this.data.screenMode==='normal'){ context.requestFullScreen(); this.setData({screenMode:'full'}); } }, handlePause(){ this.setData({isPlaying:false}); const context=wx.createVideoContext('myVideo'); if(this.data.screenMode==='full'){ context.exitFullScreen(); this.setData({screenMode:'normal'}); }else{ console.log("Not in fullscreen mode, just pause."); } } }) ``` ```html <!-- wxml 页面结构 --> <button bindtap="handlePlay">播放/进入全屏</button> <button bindtap="handlePause">暂停/退出全屏</button> <video id="myVideo" src="{{src}}" controls="{{!isPlaying}}"></video> ``` 以上代码展示了基本的全屏切换机制,并结合了简单的 UI 控制按钮设计[^2]。 #### 注意事项 当尝试调整屏幕方向或者适配不同设备时,可能还需要额外考虑一些细节问题,比如横竖屏转换下的布局优化等问题。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值