js监听video全屏事件，js添加和移除监听事件

JS判断视频Video的播放、暂停、结束完成及获取长度事件监听处理

首先需要新建一个html文件，命名为test.html，用于介绍如何使用JS控制video视频的src。在test.html页面，使用button标签创建四个按钮，分别是播放/暂停、大、中、小，用于控制视频的播放效果。

算一下处于那段视频中间；把那段视频对应的video显示出来，并把currentTime设置到相应的时间，然后play()。播放时通过监听timeupdate事件来更新进度条的位置。通过监听ended事件来获知一段视频已经播放结束，应该加载下一段。

如果要实现点击video播放或暂停，可以使用jquery的选择器来方便选取DOM。但要注意：jquery中并没有直接控制video元素播放、暂停的方法，需要用原生的JavaScript代码来控制。

相关问答

Q1: screenfull.js全屏状态监听

1、全屏实现 监听esc取消全屏 从网上也看到了能够实现退出全屏的方法，但是我chrome和firefox上尝试了一下，并没有看到能退出全屏的效果。如果有哪位大佬证实能够实现退出全屏的方法，麻烦告诉我一下，我再进行改正。

2、利用scroll 事件来监听。当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。

3、在js中，设置当前全屏状态的初始值为 false 。由于全屏状态下 ，按 Esc 键退出全屏，浏览器监听不到 Esc 键的事件，所以需要通过浏览器窗口大小改变的事件去触发退出全屏事件。

4、该接口用来观察节点变化，MutationObserver是一个构造器，接收一个回调函数callback用来处理节点变化时所做的操作。

Q2: video.js全屏bug&隐藏/添加全屏按钮

通过调试，发现在全屏后，video标签 width & height 均为0，经过查看video.js官网文档，检查播放器实例配置，无误，Google各种方案无果。 果断放弃video自带的全屏方案。

，Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，2，如果不支持 HTML5 则自动使用 Flash 播放器。

这个组件是React Native上功能最全最好用的视频播放组件，还在持续开发之中，虽然还有些bug，但基本不影响使用，强力推荐。本文主要和大家介绍了react-native-video实现视频全屏播放的方法，希望能帮助到大家。

Q3: js指定元素全屏并监听退出全屏

1、全屏实现 监听esc取消全屏 从网上也看到了能够实现退出全屏的方法，但是我chrome和firefox上尝试了一下，并没有看到能退出全屏的效果。如果有哪位大佬证实能够实现退出全屏的方法，麻烦告诉我一下，我再进行改正。

2、注意 ：调用全屏方法的对象可以是任意一个 dom 元素，我这里的 el 可以是 document ，同时也可以是通过 document.querySelector 获取的任意 dom 。如果是 document ，就是当前页面全屏。否则就是获取的指定 dom 的区域全屏。

3、在js中，设置当前全屏状态的初始值为 false 。由于全屏状态下 ，按 Esc 键退出全屏，浏览器监听不到 Esc 键的事件，所以需要通过浏览器窗口大小改变的事件去触发退出全屏事件。

4、利用scroll 事件来监听。当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。

5、下面的代码兼容除 Opera 之外的任何浏览器。Opera 到现在最高版本为止对 onunload 的支持都是不完整的，对于 unbeforeunload 更是根本不支持。

6、document.addEventListener(fullscreenchange， function( event ) { if (document.fullscreenElement) { console.log(进入全屏)； } else { console.log(退出全屏)； }})；可以这样判断。

Q4: js如何监听屏幕滚动到底了

在vue中实现滚动监听和原生js无太大差异，下面是一个简单的demo，可在控制台查看结果。

若要想判断js window.scroll是否滚动到底部，需要用的三个属性值，它们分别是：scrollTop、clientHeight和scrollHeight；scrollTop为滚动条在Y轴上的滚动距离。clientHeight为内容可视区域的高度。

有两种方法。通过div的scrollTop变动控制垂直滚动条位置。通过div的scrollLeft变动控制水平滚动条位置。

尝试用一下其中的id， 不要直接用 $(div)。

如果你是用的jQuery0以上版本，还需要修改ng-infinite-scroll.js程序，将所有的将所有的$window.xxx改为$(window).xxx， elem.xxx改为$(elem).xxx。

var top = obj.getBoundingClientRect().top //元素顶端到可见区域顶端的距离 var se = document.documentElement.clientHeight //浏览器可见区域高度。

js监听video全屏事件的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js添加和移除监听事件、js监听video全屏事件的信息别忘了在本站进行查找喔。