小程序 隐藏video控制条

最新推荐文章于 2025-06-30 16:55:05 发布
最新推荐文章于 2025-06-30 16:55:05 发布
阅读量1.3k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/maxiaole_z/article/details/109007785
本文介绍了一个基于Vue.js的视频播放组件实现方式，该组件能够根据条件显示，并支持全屏手势操作及控制条显示等功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<video
	v-if="reFresh"
	class="video-class"
	:src="recordUrl"
	style="width: 100%;height: 100%;"
	id="videoPlay"
	enable-play-gesture="true"
	:controls="bool"
></video>

data() {
		return {
			bool:false
                }
        }

 

微信小程序video自定义control
hangGe0111的博客
11-11 3940
1.背景： 有些时候需要用到video自定需求，可以参考如下案例 2.思路 2.1 把原生的controls（底部的控制，进度条，暂停播放）隐藏掉，然后自己重写controls： 2.2 把原生的show-fullscreen-btn（全屏，退出全屏）隐藏掉，并重写； 2.3 定义bindplay（播放），bindpause（暂停），bindended（播放完毕），bindtimeupdate（更新播放时间，在拖动进度条时需要用到），一一通过代码实现即可 3.代码： 3.1wxml <v
微信小程序隐藏video进度条
qq_41956361的博客
04-27 1771
想隐藏微信小程序的进度条兼容。
微信小程序video标签控件隐藏（播放 全屏 进度条 声音 ios静音播放）
最新发布
n17742637334的博客
06-30 129
【代码】微信小程序video标签控件隐藏（播放 全屏 进度条 声音 ios静音播放）
微信小程序（原生）——video视频禁止拖动进度条、可全屏观看等视频播放结束事件、数据监听、显示播放时长、固定倍速、视频去除黑边等
努力、拼搏、奋进
11-05 6072
微信小程序——video视频禁止拖动进度条、可全屏观看等视频播放结束事件、数据监听、显示播放时长、固定倍速、视频去除黑边等
html vlc 永远隐藏控制条,video自动播放 隐藏播放控制条，并且用点击 video 元素的时候 控制暂停和播放...
weixin_31785421的博客
06-04 1409
说一下几个要求：页面打开自动播放当不能自动播放时，第一次点击(document)就触发视频播放因为播放控制条会挡住视频内容，所以隐藏，但是点击 video 元素的时候可以控制暂停和播放以上要求兼容pc端和移动端$(function(){var v = document.getElementById("whVideo");// 隐藏播放控制条，并且用点击 video 节点的时候 控制暂停和播放var...
[html]HTML5如何隐藏video元素的控制栏、全屏按钮？
歌谣的博客
04-15 2141
[html]HTML5如何隐藏video元素的控制栏、全屏按钮？ 将<video width="800px" height="400px" id="vid" src="a.mp4" controls="controls"> 中的controls="controls"删掉 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
10-15
在微信小程序中，开发者可以利用`<video>`组件来实现视频播放功能，并且可以根据需求进行高度定制。在本文中，我们将深入探讨如何在微信小程序中实现自定义播放按钮、封面图以及在视频封面上添加文案。 首先，让...
微信小程序 video组件详解及实例代码
09-01
微信小程序的`video`组件是用于在小程序中嵌入视频播放功能的核心元素，它使得开发者能够在小程序中提供丰富的媒体体验。下面将详细讲解`video`组件的使用方法、重要属性以及相关的实例代码。 ### `video`组件基本...
微信小程序调用摄像头隐藏式拍照功能
10-18
在微信小程序中，调用摄像头隐藏式拍照功能是一项重要的需求，尤其在开发涉及用户隐私保护或需要悄无声息地获取信息的应用场景中。本篇文章主要介绍如何实现这一功能，包括问题描述、解决方法以及官方提供的代码示例...
微信小程序 Video API实例详解
11-24
微信小程序的Video API是开发微信小程序时用于处理视频功能的关键工具。它允许用户在小程序内进行视频选择、拍摄和播放，极大地丰富了用户体验。在本文中，我们将深入探讨`wx.chooseVideo`对象以及如何在WXML（微信...
安卓手机浏览器_强大的浏览器，手机必装，安卓、IOS都有！
weixin_39798579的博客
11-17 993
大家好，我是互联网分享者小编茂茂，无论任何一款智能手机，除了微信，QQ，支付宝还会必备一款软件，那就是浏览器，应用市场上的浏览器真的多不胜数，知名的浏览器都有自己的独特的价值和主打的功能，这也导致每款浏览器都有一批忠实的用户。大多数人的手机安装都是一些大众的浏览器百度，或者自带浏览器，如UC浏览器，qq浏览器等，但是每次想要搜索自己想要的内容时，总是有一大堆广告内容推送。其实搜索能力的提...
vue中使用video标签禁止拖动进度条
weixin_53124862的博客
07-15 3189
开发过程中经常遇到一些出乎意料的事，那就简单的记录一下吧！注意：这里根据需求最大可接受快进的秒数。1.在template模板里。废话不多直接上正题。目前使用的是vue2。
video取消控制栏属性
qq_41797053的博客
06-04 2256
video标签取消画中画功能 nodownload: 不要下载 nofullscreen: 不要全屏 noremoteplayback: 不要远程回放 disablePictureInPicture= true 不要画中画
html video标签控制栏组件显示操作 是否显示进度条、是否显示全屏按钮、是否显示下载、是否显示视频总时间、setting按钮
大家的blog
10-21 4168
video标签控制栏组件显示操作 在css中设置相关属性隐藏：video默认setting按钮,更改是否显示播放秒数,更改是否显示进度条,更改是否显示视频总时间,更改是否显示播放暂停按钮,更改是否显示下载按钮,更改是否显示全屏按钮,更改是否显示声音,更改是否显示音量的控制条,整个控制栏都隐藏掉,重置audio和video的边框和圆角样式
js控制video的播放停止
热门推荐
黎成诃月的博客
01-19 5万+
height="500"  controls="controls"  preload="metadata"  onclick="toggleSound()">                                                             //    function toggleSound(){ //       
微信小程序 —— 自定义带进度条的音频播放控件audio
Wu_shuxuan的博客
10-19 2万+
在使用微信小程序的音频控件（audio）的时候发现居然控件中竟然没有播放进度条。例如： 而微信小程序自带的音频空间（audio）光秃秃的: 所以我就想了个办法，做了一个动态的音频进度条，像这样音乐进行到百分之几，进度条走到百分之几： -wxml <audio bindtimeupdate="MusicStart" bindended="MusicEnd" wx:for="{{MusicList}}"
【微信小程序】video视频组件问题
小平果的欢乐谷
12-02 5万+
前言将babel捧作前端一个划时代的工具一定也不为过，它的出现让许多程序员幸福地用上了es6新语法。但你就这么放心地让babel跑在外网？反正我是不放心，我就曾经过被坑过，于是萌生了研究babel代码转换的想法。本文不是分析babel源码，仅仅是看看babel转换的最终产物。es6在babel中又称为es2015。由于es2015语法众多，本文仅挑选了较为常用的一些语法点，而且主要是分析babel-
h5隐藏video控制按钮controls
荆轲刺秦王
02-22 2万+
前言 昨天app的同事（ios跟安卓）发现webview的video全屏按钮有问题，他们想禁用掉全屏、音量控制的按钮，前端同事在根据api设置disable_full_screen=1（pc端falsh平台生效），但全屏按钮依旧存在。既然api无效，那只能曲线救国，隐藏video内部controls功能按钮进而禁用全屏按钮。（以下在ios11/12安卓小米华为测试无问题） 1、怎么查看video...
小程序控制video标签全屏
03-23
### 微信小程序 `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]。 #### 注意事项 当尝试调整屏幕方向或者适配不同设备时，可能还需要额外考虑一些细节问题，比如横竖屏转换下的布局优化等问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值