video.js 禁用单击暂停

最新推荐文章于 2024-08-07 14:10:18 发布

weixin_34060741

最新推荐文章于 2024-08-07 14:10:18 发布

阅读量6.5k

点赞数 3

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000018418432

版权

video.js 默认效果是单击播放区域暂停

需求：要实现单击播放区禁止暂停功能

google发现有人提过这样的issue
作者给出来答案，通过一段css来屏蔽

.vjs-tech {
  pointer-events: none;
}

亲测有效

本来想着通过找到触发pause事件的方法进行处理的，没想到通过css就可以搞定

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34060741

关注关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

HTML5新增标签Video

X_dam的博客

01-14

788

H5新增了很多语义化标签，其中video标签就是，它取代了flash的视频效果，拥有了更多新功能 video标签视频的地址用src引入，支持MP4、ovg、webm格式，是行内块元素。属性 autoplay:自动播放，在浏览器中会被禁用，需要去浏览器设置，但是在静音状态下可以自动播放 muted : 设置静音 controls : 标签自带的控件，就是视频进度条那一栏，不同浏览...

JavaScript基础学习笔记

qq_42436532的博客

04-10

953

JS基础 1.运算符 1.1 自增运算符 var e = 10; var f = e++ + ++e; // 1. e++ = 10 e = 11 // 2. e = 12 ++e = 12 console.log(f); // 22 1.2 逻辑运算符 1.2.1 逻辑与有假必假，两边都是true才返回true 对于数值和表达式：语法：表达式1 && 表达式2 如果第一个表达式的值为真，则返回表达式2 如果第一个表达式的值为假，则返回表达式1 conso

2 条评论您还未登录，请先登录后发表或查看评论

video 禁用单击暂停

辉生活-记录程序生活的点滴。

09-03

2585

添加样式pointer-events: none;即可，如下： .video { pointer-events: none; }

video.js 禁用播放区单击暂停

qq_42249552的博客

12-05

2718

.vjs-tech { pointer-events: none; } 直接加以上css pointer-eventsCSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target none 元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获...

js 把某块html内容变为图片保存

最新发布

qq_44881588的博客

08-07

279

【代码】js 把某块html内容变为图片保存。

video标签常用控制配置，禁用单击暂停，保留双击全屏

mullerpp的博客

07-15

3151

【代码】video标签常用控制配置，禁用单击暂停，保留双击全屏。

h5 video 样式去掉工具条点击播放暂停

qq_40599116的博客

09-19

3885

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <button onclick="play()&quo

html5video暂停标志取消6,【Web前端问题】video标签如何实现点击播放再点击暂停（多个VIDEO）...

weixin_32451529的博客

06-19

1013

我这么写如果多的话太麻烦了回答：var vids = document.getElementsByTagName('video');for (var i = 0; i < vids.length; i++) {vids[i].onclick = function(){if(this.paused){this.play();}else{this.pause();}}}回答：如果你的vide...

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

u014788505的博客

05-11

2253

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

HTML5、CSS、JS基础

qq_49101841的博客

03-03

2371

学习笔记

tools.txt

huhuoyun的专栏

02-15

992

-----------------update 2017.08.20---------------- add-tools: apt-get install eclipse-cdt-autotools apt-get install convmv fuse-convmvfs unar apt-get install blender-dbg blender-ogrexml-1.8 apt-get install libgtkmm-3.0-dbg systemtap-sdt-de.

前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)

热门推荐

qq_36609655的博客

07-02

1万+

第1章Html Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。就是给文本加上含有语义的标签。接下来应该学习更多具体语义标签：一、结构（固定的结构） <html> <head> <title></title> </head> <bod...

videojs打点

Fatfish_tree的博客

10-06

944

quickObj.title = '您在' + formatSeconds(Number(_this.vue1.debriefDetails.videoData.currentTimeVideo).toFixed(0)) + '给了一个优秀标记'//实时评语逻辑--------------------------------------//快捷评语逻辑--------------------------------------//从视频中的当前时间转到上一标记，如果没有上一标记，那么什么都不做。

react+video.js h5自定义视频暂停图标

mollerlala的博客

11-16

1371

注意：videojs升级后，不能用extend创建组件，需要按下方代码建一个组件。

使用JS阻止按钮后台Click事件

杨斐的专栏

05-09

4274

function exam() { if (document.getElementById('TextBox1').value == "") { $('#span').append('不能为空的！'); return false; } }

(3)网页视频获取下载案例3

love_c_s的博客

06-23

4300

在这之前已经试了两次，这次还要下载一个视频。 1.原网页：https://e.huawei.com/cn/videolist/local/807f6de08c9a471f83f28dc0d4b0bcbd ctrl+shift+c打开调试，右边选中视频对应的区域的代码。（一般是又MP4字样的） 2.复制下来 <div class="vedioplay pause" data-wapnodialog="true" data-content=".video" data-video-path..

vue-video-player 播放加截图踩坑的解决方法随笔

qq_42265650的博客

05-20

528

this.$nextTick(() => { let video = document.getElementsByClassName("vjs-tech")[0]; let canvas = document.createElement("canvas"); let img = new Image(); // img.crossOrigin = "anonymous"; //原先以为是这个问题跨域 let w = wind

前端对接海康威视监控

weixin_39559449的博客

07-01

3703

参考文章 vue对接官方插件WebControl：https://blog.csdn.net/qq_41732963/article/details/115670910vue无海康官方插件对接：https://blog.csdn.net/qq_41732963/article/details/115655739海康监控流有多种协议实时串流协议（Real Time Streaming Protocol，RTSP）是一种网络应用协议，专为娱乐和通信系统的使用，以控制流媒体服务器。该协议用于建立和控制终

vue-video-player 手机端使用postcss-pxtorem自适应大小

w710537643的博客

06-16

1299

<template> <div class='videomp4' @dblclick="clickFun()"> <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"