下载鸥 > 网站下载 > 开发教程 > JS/JQuery

jQuery控制视频在滑动到当前区域自动播放

302 2021-11-15 17:49:52

收藏
怎样用jQuery控制视频在页面滑动到当前区域自动播放与暂停播放呢?
 

html代码

<div class="video2">
  <video class='video2' controls="video" preload=''>
    <source src='/static/images/video2.mp4' type='video/mp4'>
  </video>
</div>
 

js代码

$(document).scroll(function(){
  if($(document).scrollTop() > ($('.video2').offset().top - 100) &&  $(document).scrollTop() < ($('.video2').offset().top + $('.video2').height()) ){
    $('.video2')[1].play();
  }else{
    $('.video2')[1].pause();
  }
})
 

附注

本方案基于jQuery,请提前引入jQuery库。

这样,我们就实现了在页面滑动到视频区域时自动播放视频的功能。

本文地址:https://xzo.com.cn/develop/js/1053.html

有帮助,很赞!

信息来源:下载鸥
导出教程 下载word版教程
发表评论 共有条评论
关于JS/JQuery


JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

JavaScript十分强大,不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理,都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。

推荐JS/JQuery开发教程
JS验证手机是否11位的做法
JS验证手机是否11位的做法

在网站表单提交前,我们往往需要验证一下信息避免错误数据,那么,怎样验证手机号...

1 327
jQuery怎样监听鼠标滚动是向上还是向下的状态?
jQuery怎样监听鼠标滚动是向上还是向下的状态?

知乎鼠标向下滚动显示文章标题,向上滚动显示栏目;又或者向下滚动到底部时异步...

0 450
JS获取当前时间、日期、星期并每秒更新一次
JS获取当前时间、日期、星期并每秒更新一次

很多网站上会有当前年月日、星期、时间的展示。这个展示用php做未免浪费性...

0 303
swiper轮播图空白案例记录
swiper轮播图空白案例记录

今天鸥哥在用swiper做轮播图时,轮播效果虽然没问题,但只显示第一张,后面的图片...

0 289
js点击追加信息到textarea
js点击追加信息到textarea

通过灵活运用js,我们可以轻松实现点击追加相关信息到textarea的功能。这个功...

0 473
js判断windows操作系统还是mac os系统
js判断windows操作系统还是mac os系统

网站日常访客主要是windows和mac os两种操作系统,如果网站提供资源下载,则需...

0 1537
JS判断苹果iPhone与iPad、安卓设备类型适配
JS判断苹果iPhone与iPad、安卓设备类型适配

在网站开发的过程中,一些涉及到资源下载的网站会通过判断不同系统手机来展示...

3 536
jQuery怎样给图片添加默认域名?
jQuery怎样给图片添加默认域名?

在很多网站中,图片的默认路径是相对于根目录的绝对路径,如果是其他站点引用,则...

0 351
随机JS/JQuery开发教程
jQuery判断今天是星期几并展示对应信息
jQuery判断今天是星期几并展示对应信息

一些功能比较高级的站点,需要自动展示信息。例如,自动判断今天是星期几,并根据...

1 284
自动切换导航高亮效果(基于jQuery)
自动切换导航高亮效果(基于jQuery)

在一些单页面站点中,网站的各个主模块都在同一个页面,点击导航可以页面内跳转...

0 312
JS判断访问域名并跳转
JS判断访问域名并跳转

很多时候,我们要防止资源盗用,此时可以通过js验证访问域名并跳转的方式处理。...

0 889
jQuery怎样给图片添加默认域名?
jQuery怎样给图片添加默认域名?

在很多网站中,图片的默认路径是相对于根目录的绝对路径,如果是其他站点引用,则...

0 351
JS获取浏览器语言(中英文多语言站)并自动跳转代码
JS获取浏览器语言(中英文多语言站)并自动跳转代码

如果是多语言站点,主动获取浏览器默认语言并自动进行跳转可以有效降低跳出率...

0 765
JS获取URL参数及编解码
JS获取URL参数及编解码

JS获取URL参数及编解码是一项比较常规的操作,以下是Jxinx博客介绍的JS获取UR...

0 831
JS判断苹果iPhone与iPad、安卓设备类型适配
JS判断苹果iPhone与iPad、安卓设备类型适配

在网站开发的过程中,一些涉及到资源下载的网站会通过判断不同系统手机来展示...

3 536
js网站视频播放器ckplayer和dplayer优缺点分析
js网站视频播放器ckplayer和dplayer优缺点分析

dplayer和ckplayer都是非常流行的web视频播放器,二者都占有相当大的用户市场...

0 1329
客服QQ:341553759
点击咨询 常见问题 >
官方交流群:90432500
点击加入