当前位置:首页 > 技术博客 > JQuery > Jq滚动条控制视频自动播放和自动暂停

Jq滚动条控制视频自动播放和自动暂停

6年前 (2019-04-22)JQuery697

项目需要根据用户窗口判断是否在视频窗口,入口在视频窗口则播放,否则暂停。

        //通过scroll监听窗口活动
        $(window).scroll(function() {
            // 获取视频窗口距离顶部的距离、滚动条的位置
            var TvHeight = $("video").offset().top, ScrollTop = $(this).scrollTop();
            //判断当前浏览器是否在视频播放窗口,900:视频窗口的高度
            if(TvHeight - ScrollTop < 900){
                //播放视频
                $('video').trigger('play');
            }
            if(TvHeight - ScrollTop < "-900" || TvHeight - ScrollTop < "-900"){
                //暂停播放
                $('.video').trigger('pause');
            }
        });


版权声明:本文由 LzxBlog 发布,如需转载请注明出处。

本文链接:https://www.liuzhixi.cn/html/41.html

标签: jQuery

相关文章

JQuery动态添加元素方法

JQuery动态添加元素方法

JQuery动态添加元素方法append()在父级最后追加一个子元素 appendTo()在父级最后追加一个子元素 prepend()在父级...

jQ获取服务端时间

jQ获取服务端时间

当我们有倒计时的需求时,不可能以客户端的时间为准,如果客户端时间不予网络时间一致,整个项目就完蛋了,所以我们需要获取服务端时间我们获取服务器时间是发起ajax请...

JQuery生成二维码

JQuery生成二维码

jquery.qrcode.min.js 是一款基于 jquery 方便生成二维码图片的小插件。该插件兼容主流浏览器:IE9~11, Chrome, Firef...

10种jQuery轮播图特效整合

10种jQuery轮播图特效整合

下载链接: https://pan.baidu.com/s/1YQDM4yDcTgnfnetL07MbgA   提取码: pmn1...

jQuery动态数据流程步骤条特效

jQuery动态数据流程步骤条特效

jQuery动态数据流程步骤条特效,事先设置好需要走的流程步骤,然后根据状态进行判断走到哪一步,审批意见是什么,支持动态数据配置。<html>&nb...

jQuery html5背景视频插件

jQuery html5背景视频插件

vidbacking是一款响应式的,跨平台的html5视频背景插件。该视频背景插件允许你在页面中的某个div后整个页面中使用HTML5视频作为背景使用方法在页面...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。