web端video常用控制配置(代码片段)

super码王 super码王     2022-10-29     548

关键词:

一、阻止视频video标签点击视频区域播放暂停

<video controls id="video1" autoplay muted playsinline></video>

myVid = document.getElementById("video1");
 
myVid.addEventListener("click", mouseHandler, false);
 
function mouseHandler(event) 
      // 阻止视频默认点击事件
      event.preventDefault()

二、隐藏video的各种控件

<video controls class="video"/>

/* 隐藏video 全屏按钮 */
.video::-webkit-media-controls-fullscreen-button 
		display: none;

/* 隐藏video 播放按钮 */
.video::-webkit-media-controls-play-button 
		display: none;

/* 隐藏video 进度条 */
.video::-webkit-media-controls-timeline 
		display: none;

/* 隐藏video 观看的当前时间 */
.video::-webkit-media-controls-current-time-display
		display: none;            

/* 隐藏video 剩余时间 */
.video::-webkit-media-controls-time-remaining-display 
		display: none;            

/* 隐藏video 音量按钮 */
.video::-webkit-media-controls-mute-button 
		display: none;            

.video::-webkit-media-controls-toggle-closed-captions-button 
		display: none;            

/* 隐藏video 音量的控制条 */
.video::-webkit-media-controls-volume-slider 
		display: none;            

/* 隐藏video 所有控件 */
.video::-webkit-media-controls-enclosure 
		display: none;

activemq常用配置(代码片段)

所用版本为apache-activemq-5.15.4的版本修改端口号当端口号冲突时,可以修改这两个端口号。修改activemq.xml修改里面的61616端口。修改jetty.xml,修改里面的8161端口。两个配置文件均位于/usr/local/apache-activemq-5.15.4/conf文件夹下activemq.xml... 查看详情

分布式版本控制工具git常用操作命令(代码片段)

...地处理从很小到非常大的项目版本管理。文章目录说明1.常用操作1.1.基本操作1.2.分支管理1.3.标签管理2.Windows配置别名2.1.命令行配置别名2.2.配置文件配置别名2.3.常用别名配置2.4.自定义样式3.配置用户3.1.设置用户名和邮箱3.2.生... 查看详情

nginxnginx常用的基础配置(代码片段)

文章目录一、基础配置二、隐藏Nginx版本信息三、禁止ip直接访问80端口四、启动web服务(vue项目为例)五、PC端和移动端使用不同的项目文件映射六、一个web服务,配置多个项目(location匹配路由区别)七、配置负载均衡八、SSL配... 查看详情

centos安装supervisor(代码片段)

什么是SupervisorSupervisor是一个进程控制系统。它是一个C/S系统,服务端是supervisord进程,控制端使用supervisorctl来进行控制启动进程。同时它也提供了一个web界面,来可以使我们方便的进行进程的控制和查看日志信息。 本篇博客... 查看详情

移动端遇到的问题小结--video(代码片段)

本篇主要是针对Android系统,所遇到的问题。1.video的全屏处理:  这里说的全屏是指针对浏览器的全屏,而不是整个手机的全屏。要想全屏效果只需对video标签加   webkit-playsinline 。  但是这样做会有一个问题... 查看详情

tomcat常用配置详解及优化(代码片段)

常用配置详解 1目录结构 /bin:脚本文件目录。 /common/lib:存放所有web项目都可以访问的公共jar包(使用Common类加载器加载)。 /conf:存放配置文件,最重要的是server.xml。 /logs:存放日志文件。 /server/webapps... 查看详情

springboot实现web的常用功能(代码片段)

SpringBoot实现Web的常用功能通常在Web开发中,会涉及静态资源的访问支持、视图解析器的配置、转换器和格式化器的定制、文件上传下载等功能,甚至还需要考虑到与Web服务器相关联的Servlet相关组件的定制。SpringBoot框架... 查看详情

esp32通过web图形控件调节pwm占空比输出(代码片段)

ESP32通过Web图形控件调节PWM占空比输出🌼电脑Web控制页面🌻手机浏览器Web也可以实现控制✨以上控制前提是,esp32和电脑端以及手机端都在同一个网络环境下。🛠esp32型号以及参数配置⚡初次使用,在上传代... 查看详情

zookeeper--初识zookeeperzookeeper的安装和配置zookeeper命令操作(zookeeper数据模型zookeeper服务端/客户端常用命令)(代码片段)

...r状态3.Zookeeper命令操作3.1Zookeeper数据模型3.2Zookeeper服务端常用命令3.3Zookeeper客户端常用命令1.Zookeeper–初识Zookeeper、Zookeeper的安装和配置、Zooke 查看详情

git常用操作命令(代码片段)

...nux内核开发而开发的一个开放源码的版本控制软件。Git与常用的版本控制工具CVS,Subversion等不同,它采用了分布式版本库的方式,不必服务器端软件支持。下面,请跟着Mobro一起了解常用的git命令:初始化gitconfig--global"user.name"# 查看详情

nfs共享存储(代码片段)

...户端以root管理员访问时,映射为NFS服务器的匿名用户(不常用),root用户映射后还是普通用户no_root_squa 查看详情

ansiblekey验证配置(代码片段)

ansible的控制端与被控制主机直接若想建立连接,默认验证方式是基于key验证的,下面就是在ansible控制端创建并copy到被控制主机的详细步骤:[[email protected]~]#ssh-keyssh-keygenssh-keyscan[[email protected]~]#ssh-keygenGeneratingpublic/private... 查看详情

tomcat记录-tomcat常用配置详解和优化方法(代码片段)

常用配置详解 1目录结构 /bin:脚本文件目录。 /common/lib:存放所有web项目都可以访问的公共jar包(使用Common类加载器加载)。 /conf:存放配置文件,最重要的是server.xml。 /logs:存放日志文件。 /server/webapps... 查看详情

rsync(代码片段)

使用roles实现一键部署rsync环境主机名wanIPlanIP服务角色m0110.0.0.61172.16.1.61Ansible控制端backup10.0.0.41172.16.1.41rsync服务端被控端web0110.0.0.7172.16.1.7rsync客户端被控端web0210.0.0.8172.16.1.8rsync客户端被控端nfs10.0.0.31172.16.131rsy 查看详情

移动端video标签默认置顶的解决方案(代码片段)

概述在移动端上面,比如说微信上面打开一个页面,如果有video标签的话,常常会出现video标签默认置顶的情况,一般的解决方案是在不需要看见它的时候给它加一个display:none进行隐藏。今天在浏览TGideas文档库的时候无意中发现... 查看详情

移动端web开发流式布局flex布局rem布局(代码片段)

文章目录移动端Web开发流式布局flex布局布局原理常用属性rem布局rem基础媒体查询less移动端Web开发流式布局在PC端进行网页制作时,经常使用固定像素的网页布局,但这种布局方式对小屏幕的设备不友好。为了适应小屏幕... 查看详情

boostrap常用属性记录(代码片段)

作为一个后端开发人员,前端头疼,学习学习bootstrap,能美化一点页面。自己也不觉得难受了。学习地址:https://www.imooc.com/video/33461导航条正常就用boostrap页面的代码拷贝过来。修改js文件路径。navbar居中显示࿰... 查看详情

video移动端兼容问题(代码片段)

...video标签播放不自动全屏,这也是解决大部分问题的核心代码  查看详情