直接上代码js部分:

<script type="text/javascript">
var go;//记录video播放器位置
var video=document.querySelectorAll('video')//获取页面中所有video
for(var i=;i<video.length;i++) {
(function (v) {
video[v].addEventListener('play',function(e){
if(go){
if(go!=this){
go.pause();//暂停播放
go.currentTime = ;//跳转0秒
}
}
go = this;
});
})(i);
}
$(window).scroll(function () {//监听滚动条
if(go){
var top = go.getBoundingClientRect().top;//实时获取当前video距离窗口顶部
var bottom = go.getBoundingClientRect().bottom;//实时获取当前video距离窗口底部
if(bottom< || top>$(window).height()){//判断video是否在有效区域
go.pause();//暂停播放
go.currentTime = ;//跳转0秒
}
}
});
</script>

移动端控制视频点击播放点击下一个视频时自动停止播放&监听滑动溢出屏幕高度时停止播放的更多相关文章

  1. UITableView延伸:点击cell关闭键盘,加载不同cell,监听里面的textfeild内容改变

    其实点击cell关闭键盘只要一句话 - () {         cell = [tableView dequeueReusableCellWithIdentifier:){         cell ...

  2. Android: ScrollView监听滑动到顶端和底端

    在项目中需要监听ScrollView滑动到顶端和底端的时候以实现自己的ScrollView,那么怎样去监听呢?今天查看了一下ScrollView的源码,找到了一种方法.先看一下源码中的overScro ...

  3. 工作记录--使用FFmpeg将一个视频文件中音频合成到另一个视频中

    由于工作需要,临时被老大吩咐去研究一个FFmpeg工具,通过linux命令行去将一个视频中的音频提取出来并合成到另一个视频中,最终的效果是要保证2个视频中的音频都在一个视频中播放. 但是本人对FFmp ...

  4. 表单中的input框点击enter到下一个input框

    $(function() { $("#form1").on("keydown", "tr input", function() { //响应 ...

  5. app进入后台之后接收到通知,点进去进入新的页面,再次进入后台,再点击通知进入页面(,两次通过通知进入的页面,创建了两次,会多一个页面,)解决办法监听

    在点击通知进入的页面的 //UIApplicationWillResignActiveNotification是app即将进入后台的方法 //增加监听使它在进入后台之前pop上一个页面 - (void ...

  6. Android实现监听控件点击事件

    Android实现监听控件点击事件 引言 这篇文章主要想写一下Android实现监听点击事件的几种方法,Activity和Fragment实现起来有些方法上会有些不同,这里也略做介绍. 最近一直在忙一 ...

  7. Android开发笔记(11)——DialogFragment & 点击监听

    转载请注明:http://www.cnblogs.com/igoslly/p/6931519.html DialogFragment使用 & 点击监听 /* DialogFragment是用于 ...

  8. Python音视频开发:消除抖音短视频Logo和去电视台标

    ☞ ░ 前往老猿Python博文目录 ░ 一.引言 对于带Logo(如抖音Logo.电视台标)的视频,有三种方案进行Logo消除: 直接将对应区域用对应图像替换: 直接将对应区域模糊化: 通过变换将要 ...

  9. Android 视频播放器切换到下个视频时残留上个视频画面的解决办法

    最近在做一个Android视频播放器,遇到一个问题:切换到下一个视频时,中间会停留上一个视频的残存画面.   这是怎么回事?   我在网上找了很多资料,终于找到了原因:我是用自定义一个surfacev ...

随机推荐

  1. Redhat7.3更换CentOS7 yum源

    Redhat yum源是收费的,没有注册的Redhat机器是不能使用yum源的. 1.当前系统环境: 系统版本:Red Hat Enterprise Linux Server release 7.3 ...

  2. python3 二分法查找

    '''二分法查找有序列表掐头去尾取中间查找列表中xx在不在列表中,在,则返回索引值'''# lst = [1, 4, 6, 8, 9, 21, 23, 26, 35, 48, 49, 54, 67, ...

  3. Kafka简介、基本原理、执行流程与使用场景

    一.简介 Apache Kafka是分布式发布-订阅消息系统,在 kafka官网上对 kafka 的定义:一个分布式发布-订阅消息传递系统. 它最初由LinkedIn公司开发,Linkedin于201 ...

  4. 装饰器模式以及Laravel框架下的中间件应用

    Laravel框架的中间件使用:从请求进来到响应返回,经过中间件的层层包装,这种场景很适合用到一种设计模式---装饰器模式. 装饰器模式的作用,多种外界因素改变对象的行为.使用继承的方式改变行为不太被 ...

  5. HTML多图无缝循环翻页效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 遍历CheckBox根据指定条件做筛选js

    $('#del').click(function(){ var checkeds=$('input[name=cid]:checked') checkeds.each(function() { var ...

  7. iOS 钥匙串存储用户数据

    参考: http://www.jianshu.com/p/f6d40065bb6c #import <Foundation/Foundation.h> #import <Securi ...

  8. js02-常用流程控制语句

    1.if语句 语法:if(条件){ 条件成立时执行 }else{ 条件不成立执行 } 例 var ji = 20; if(ji>=20){ console.log('恭喜你,吃鸡成功,大吉大利' ...

  9. Linux 系统中五笔输入法有些字打不出来(已解决)

    最近在使用CentOS7 桌面版本,在用五笔打字时,有些字打不出来,比如“覆盖”.但是在WIN下能打出来. 从网上查找原因,原来是需要改成GBK字符集.方法如下: 修改文件 vim /usr/shar ...

  10. JSON.stringify()的不常见用法

    1.JSON.stringify()只序列化可遍历属性(enumerable=true) var obj = {}; Object.defineProperties(obj, { 'foo': { v ...