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

时间:2021-07-24 22:51:19

直接上代码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&comma;监听里面的textfeild内容改变

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

  2. Android&colon; ScrollView监听滑动到顶端和底端

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. hdu-5992 Finding Hotels&lpar;kd-tree&rpar;

    题目链接: Finding Hotels Time Limit: 2000/1000 MS (Java/Others)     Memory Limit: 102400/102400 K (Java/ ...

  2. 转:MyBean简介

                        (在开始之前,非常感谢 D10.天地弦) 1.1 概述 MyBean是一个用于Delphi应用程序开发的开源.轻量级.可配置插件框架.它通过巧妙的系统架构设计, ...

  3. maven的入门hello world

    编写pom pom.xml是maven的核心.Project Object Model,定义了项目的基本信息,用于描述项目如何构建,项目依赖等. 首先,新建hello-world文件夹,新建pom.x ...

  4. sqoop1&period;99&period;4 JAVA API操作

    貌似天国还没有介绍1.99.4的java操作代码的,自己吃一次螃蟹吧 如果你是MAVEN项目 <dependency> <groupId>org.apache.sqoop&lt ...

  5. Ajax之数据连接信息捕获

      connDB.properties: DB_CLASS_NAME=com.mysql.jdbc.Driver DB_URL=jdbc:mysql://127.0.0.1:3306/db_datab ...

  6. Android静态变量使用陷阱

    静态变量大家再熟悉不过了,本来没什么好重复的.事情起因是这样的,最近测试那边反应正在做的一个产品总是莫名其妙的显示不出某些数据,甚至闪退崩溃,仔细查了几遍发现没什么问题,最后百般周折发现在那部测试机上 ...

  7. ios 视频播放

    #import "ViewController.h"@import MediaPlayer; @interface ViewController (){    MPMoviePla ...

  8. PO &amp&semi; SO Integration By IDOC in CNABB

    PO & SO Integration By IDOC in CNABB 话说博主来ABB一个多月时间了,虽然对ABB系统内的流程和配置不是很了解,但对ABB系统内使用的PO和SO通过idoc ...

  9. ubuntu64位库

    安装 12.04ubuntu32位库:sudo apt-get install ia32-libs

  10. ARM寄存器总结:

    ARM有16个32位的寄存器(r0到r15). r15充当程序寄存器PC,r14(link register)存储子程序的返回地址,r13存储的是堆栈地址. ARM有一个当前程序状态寄存器:CPSR. ...