HTML5视频仅在桌面上滚动播放

时间:2015-03-25 14:28:03

标签: jquery html5 html5-video autoplay

我只是使用Matthew Hudson的device.js(https://github.com/matthewhudson/device.js)进行浏览器检测。我有一个html5视频,当你在窗口视图外滚动和暂停时播放。

我想仅在桌面设备上运行视频功能,并在移动设备上保留默认点击播放功能。

    //Play video when scrolled to
$(document).ready(function() {
if ($("body").hasClass("desktop")) {
    // Get media - with autoplay disabled (audio or video)
    var media = $('video').not("[autoplay='autoplay']");
    var tolerancePixel = 40;

        function checkMedia(){
            // Get current browser top and bottom
            var scrollTop = $(window).scrollTop() + tolerancePixel;
            var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;

            //if ($(window).scrollTop() > $(window).height() - 10) {
            media.each(function(index, el) {
            var yTopMedia = $(this).offset().top;
            var yBottomMedia = $(this).height() + yTopMedia;

            if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
            $(this).get(0).play();
            } else {
            $(this).get(0).pause();
            }
            });
            //}
        }
        $(document).on('scroll', checkMedia);
    }

});

即使正文具有“桌面”类,该函数根本不会运行吗?

0 个答案:

没有答案