H5中video全屏后如何隐藏默认控件并显示自定义控件

最新推荐文章于 2023-02-24 10:22:05 发布
最新推荐文章于 2023-02-24 10:22:05 发布
阅读量3.2k 收藏 5
点赞数 2
分类专栏： JS-H5 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanzi_0216/article/details/106760291
版权

H5中video全屏后如何隐藏默认控件并显示自定义控件

全屏后如何隐藏默认控件

/*全屏操作后  自带的控制栏会显示  在显示的时候隐藏*/
video::-webkit-media-controls {
   
    display: none !important;
}
.controls {
   
    比全屏的状态下的视频元素高*/
    z-index: 2147483647
最低0.47元/天 解锁文章
yanzi_0216
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
[Video.js]隐藏和显示视频播放器控件
weixin_33849942的博客
04-21 9254
原文链接：Hiding and Showing Video Player Controls 上周我决定解决一些围绕控制栏的悬而未决的问题，然后进入相关播放器更新的流程。我现在很幸运地有了一些时间，并且我会写一些关于它的更新。 播放器控制栏的预期行为之一是，当用户在观看视频时处于非活动状态时，它会在几秒钟后淡出。以前，我们通过video.js实现这一点的方式是通过一些CSS技巧。 当用户的鼠标移...
如何隐藏原生html5 video,HTML5video//完全隐藏控件
weixin_30550985的博客
06-03 1558
喜欢这个：controls是一个布尔属性 ：注意：布尔属性不允许使用“true”和“false”值。 为了表示一个错误的值，该属性必须被完全省略。您可以使用CSS伪select器来隐藏控件，如Demo： https ： //jsfiddle.net/g1rsasa3//For Firefox we have to handle it in JavaScript var vids = $("vide...
video 播放 全屏 更多控件显示隐藏&自定义视频控件&Shadow DOM
細水、長流√的专栏
06-19 4390
影子DOM通过创建文档片段的形式高效地封装内容，影子DOM的内容是特殊的文档，会通过合并到主文档的方式来创建所有被渲染的内容。 实际上一些浏览器已经通过影子DOM的方式来渲染浏览器的插件
video全屏操作栏自定义样式&&js 指定元素全屏&&视频截图下载
jinse29的博客
02-24 4045
最近遇到的需求就是重新video标签的控制栏的样式，包括进度条、音量、倍速、全屏等样式，在正常状态下，可以将原生样式隐藏掉自定义新的控制栏元素定位上去，但是全屏后样式失效，出现的还是原生的控制栏。只能曲线救国，说白了就是让video的父级全屏，进而让video也屏，控制栏的自定义组件样式定位上就可以了。具体是f12 可以看出，自定义的组件其实还在原先的位置，全屏后的video新增的伪类和样式无法修改，未全屏状态下自定义控制栏的组件样式。全屏后，发现控制栏已经变成原生的样式。
vue自定义h5video视频播放器进度条组件，可拖拽、跳转、倍速、全屏
热门推荐
gyw的博客
06-08 1万+
一个进度条组件控制多个视频的播放、进度调整。视频可点击全屏观看
ios html5 自动全屏播放,禁止iPhone Safari video标签视频自动全屏的办法
weixin_34060672的博客
06-04 1934
最近做一个移动端微信页面项目，在微信页面中有视频播放，但是需要禁止IOS的自动全屏播放(前提必须使用video标签)。如：在iPhone safari 点击视频会弹出播放器进行全屏播放。在网上看了看别人给出的答案，引用如下：可以在 video 标签上加一个 “webkit-playsinline” 属性 ，如下：我想说这能解决问题吗？ 答案当然是不能。。。。当然在iOS APP中使用网页视频，是可...
自定义H5视频播放器的控件
07-27
这里的`controls`属性默认会显示浏览器内置的播放、暂停、进度条等控件，但我们通常会移除这个属性，以便自定义控制条。 接着，利用JavaScript，我们可以访问`<video>`元素的API来控制视频播放。例如，`play()`、`...
h5，video禁止拖动进度条，禁止快进
03-24
利用jq简单控制h5视频播放进度条，让使用者不能快进，可以后退。原理是每500毫秒记录一次进度条时间，如果下一个500毫秒的进度减去上一个500毫秒的进度大于1秒，那么就让视频返回到上一个进度，因项目开发中对于视频...
自定义video播放组件-可全屏可加速兼容移动端
10-21
在IT行业中，自定义video播放组件的开发是一项常见的任务，特别是在构建富媒体网站或移动应用时。本项目标题“自定义video播放组件-可全屏可加速兼容移动端”揭示了这个组件的核心特性，即它提供了丰富的用户体验...
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
10-15
在本文中，我们将深入探讨如何使用vue-video-player组件在微信环境中解决自动全屏播放以及横竖屏导致的样式错乱问题。vue-video-player是一个流行的Vue.js插件，用于实现视频播放功能，但它可能在某些特定环境下，如...
VideoPlayer解决H5在微信中播放视频弹窗问题的插件
08-11
总的来说，`VideoPlayer` 是一个针对H5在微信中播放视频问题的有效解决方案，它通过自定义播放器和优化用户体验，使得在微信内的视频播放变得更加流畅和可控。通过熟练掌握和应用这个插件，开发者可以提高H5项目的...
前端实现页面全屏效果
liuzemtx的博客
10-27 3533
前端实现页面全屏效果 代码写的比较烂，大哥们别骂我 //全屏按钮 function fullScreen() { var width = window.screen.width; var height = window.screen.height; //vue获取元素并给元素赋值 var video = this.$refs.backVideo; //vue用ref获取元素 video.style.width = width video.style.height = h
Android 控件的显示和隐藏
Cricket_7的博客
03-11 240
控件的显示和隐藏 有两种方法 方法1：代码中控制。 llProg.setVisibility(View.VISIBLE); rlResult.setVisibility(View.INVISIBLE); 方法2，XML文件中设置属性 android:visibility="invisible" &lt;LinearLayout ...
H5自定义video功能与样式处理
weixin_30568715的博客
12-15 1563
H5的video非常简单，方便，有时我们可能需要自己来设置样式来自定义的video，自定义的话我们需要对功能进行一些处理，这里常用的功能几乎是都用到了，第一次练习代码很累赘，之后会慢慢改进。 常用的一些 video API "视频播放":video.play(); "视频暂停播放":video.pause(); "视频地址":video.currentSrc; "视频总时长":vide...
H5自定义video播放控件，播放暂停使用图标
calm_programmer的博客
12-26 7168
大家都知道vedio的contorls属性可以将video的控件显示出来，包括播放、暂停、进度条、声量控制、全屏显示等。但是出于需求，往往需要将某些控件外形变成我们想要图标（但功能一样），而不是全部使用vedio自带的控件图标。 下面这个例子，我将隐藏video自带的播放按钮，使用自定义的播放、暂停图标作为控件，下面这个例子是从awesome图标库下载的图片，大家自行选择！ 播放图标下载地址为：play-circle – Font Awesome 中文网 为了读者能够一目了然地了解制作效果，下面展示g
前端基础学习之h5-dom操作、新增api（全屏操作、video多媒体、history、web存储等）
no pains,no gains
01-07 517
1.获取dom的方式 H5 api有效选择器:在css当中能使用的都是有效选择器 document.getElementsByClassName (‘class’); 通过类名获取元素，以伪数组形式存在。 document.querySelector(‘selector’); 通过CSS选择器获取元素，符合匹配条件的第1个元素。 document.querySelectorAll(‘selector’); 通过CSS选择器获取元素，以伪数组形式存在。 2.类操作 H5 api 基于对象的classLis
H5 移动端自定义video的控制条
hcjlwn的博客
12-28 2838
最近在做一个视频播放的项目，用video自带的控制条(controls)，点击全屏之后，再退出全屏之后，会导致输入框触发不了键盘事件，一直找不到原因，最后实在没办法，只能自己写全屏事件来解决这个问题。 1、首先把列表的video改为用图片展示 2、全屏后把设置video的宽高为100%，并去掉video的controls属性，这样就隐藏了video自带的控制条 video.styl...
H5视频插入的两种方式 pc端 video标签里的autopaly自动播放
weixin_45502613的博客
12-12 1417
第一种：<video src="movie.ogg"></video> 第二种：<video> <source src="movie.ogg" type="video/ogg" > </video>(type必加属性) **属性设置：** 1.Width height设置视频的宽高 <video src="movie.ogg" ...
html时间选择控件 简书,Video控件（自定义播放栏）
weixin_32567865的博客
06-03 319
完成了这样一个自定义的视频播放栏以及视频暂停页视频播放页视频暂停页.png昨天暂时只做了视频的播放与暂停功能，实时运动心率检测以及视频运动难度这块等接口这次关于的操作中，主要用到的是关于视频的ontimeupdate函数、video.currentTime(视频当前播放时间)、以及video.duration(视频总长)。具体代码：HTML部分首先 创建一个video控件其中autoplay说明视...
手机浏览器中video标签控件显示不全
最新发布
09-08
手机浏览器中video标签控件显示不全的原因有两个方面。首先，iOS微信浏览器和安卓微信浏览器使用了不同的内核。iOS微信浏览器采用了Chrome内核，所以大部分属性都被支持。而安卓微信浏览器采用了X5内核，一些属性不被支持，比如playsinline属性，导致视频始终全屏显示。 其次，安卓微信浏览器还有一个特有属性x5-video-player-type，启用同层H5播放器。这个属性可以让视频全屏时，div元素可以呈现在视频层上，实现沉浸式播放。但是，这样做会除去video控件和微信的导航栏，只留下"X"和"关闭"按钮。 总结来说，造成手机浏览器中video标签控件显示不全的主要原因是不同浏览器内核的差异以及特有属性的限制。在iOS微信浏览器中，大部分属性都被支持，而在安卓微信浏览器中，一些属性不被支持，并且还有特有属性可以实现沉浸式播放。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值