HTML5 和 Javascript 仅在可见时播放视频 [英] HTML5 and Javascript to play videos only when visible

查看：21
本文介绍了HTML5 和 Javascript 仅在可见时播放视频的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有兴趣设置一个包含多个视频剪辑的 HTML 页面，以便每个视频剪辑仅在可见时播放，然后在看不见时暂停.

我找到了这个很好的例子，说明如何用一个剪辑实现这一点，但我无法修改代码以处理多个剪辑.也许我需要将此代码转换为易于重用的函数?

这是我到目前为止所拥有的(上面链接的 JS Bin 修改为 2 个剪辑而不是一个).

此代码似乎仅适用于两个剪辑中的一个.

<!-- 使用 jsbin.com 创建的源代码可以通过 http://jsbin.com/ocupor/1/edit 进行编辑--><头><元字符集=utf-8/><title>JS Bin</title><风格>#对 {位置:绝对；顶部:2000px；}#video1 {位置:绝对；左:2000px；顶部:2000px；}#video2 {位置:绝对；左:2000px；顶部:3000px；}</风格><style id="jsbin-css"></风格>#<body style="width: 4000px; height: 4000px;"><div id="信息"></div><div id="向下">请向下滚动...

<div id="右">请向右滚动...

<video id="video1"><source src="http://video-js.zencoder.com/oceans-clip.mp4"/></视频><脚本>var video = document.getElementById('video1'), 分数 = 0.8;函数 checkScroll() {var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w,//rightb = y + h,//底部可见X，可见Y，可见；visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));可见 = 可见 X * 可见 Y/(w * h);如果(可见>分数){视频播放()；} 别的 {视频.暂停()；}}检查滚动()；window.addEventListener('scroll', checkScroll, false);window.addEventListener('resize', checkScroll, false);<video id="video2"><source src="http://video-js.zencoder.com/oceans-clip.mp4"/></视频><脚本>var video = document.getElementById('video2'), 分数 = 0.8;函数 checkScroll() {var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w,//rightb = y + h,//底部可见X，可见Y，可见；visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));可见 = 可见 X * 可见 Y/(w * h);如果(可见>分数){视频播放()；} 别的 {视频.暂停()；}} checkScroll();window.addEventListener('scroll', checkScroll, false);window.addEventListener('resize', checkScroll, false);

解决方案

使用 isInViewport 插件和 jQuery，这是我的任务代码

$('video').each(function(){if ($(this).is(":in-viewport")) {$(this)[0].play();} 别的 {$(this)[0].pause();}})

I am interested in setting up an HTML page with multiple video clips such that each video clip plays only while visible and then pauses when out of view.

I have found this great example of how this can be implemented with one clip, but I have been unable to modify the code to work with multiple clips. Perhaps I need to convert this code into a function for easy re-usability?

Here is what I have so far (JS Bin linked above modified for 2 clips instead of one).

This code seems to work for only one of the two clips.

<!DOCTYPE html>
<html>
    <!--   Created using jsbin.com   Source can be edited via http://jsbin.com/ocupor/1/edit
    -->
    <head>
        <meta charset=utf-8 />
        <title>JS Bin</title>
        <style>
            #right {
                position: absolute;
                top: 2000px;
            }
            #video1 {
                position: absolute;
                left: 2000px;
                top: 2000px;
            }
            #video2 {
                position: absolute;
                left: 2000px;
                top: 3000px;
            }

        </style>

        <style id="jsbin-css">
        </style>
    </head>
    #
    <body style="width: 4000px; height: 4000px;">
        <div id="info"></div>
        <div id="down">
            scroll down please...
        </div>
        <div id="right">
            scroll right please...
        </div>
        <video id="video1">
            <source src="http://video-js.zencoder.com/oceans-clip.mp4"/>

        </video>
        <script>
            var video = document.getElementById('video1'), fraction = 0.8;

            function checkScroll() {
                var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right
                b = y + h, //bottom
                visibleX, visibleY, visible;

                visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
                visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

                visible = visibleX * visibleY / (w * h);

                if (visible > fraction) {
                    video.play();
                } else {
                    video.pause();
                }
            }

            checkScroll();
            window.addEventListener('scroll', checkScroll, false);
            window.addEventListener('resize', checkScroll, false);
        </script>

        <video id="video2">
            <source src="http://video-js.zencoder.com/oceans-clip.mp4"/>

        </video>
        <script>
            var video = document.getElementById('video2'), fraction = 0.8;

            function checkScroll() {
                var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right
                b = y + h, //bottom
                visibleX, visibleY, visible;

                visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
                visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

                visible = visibleX * visibleY / (w * h);

                if (visible > fraction) {
                    video.play();
                } else {
                    video.pause();
                }
            } checkScroll();
            window.addEventListener('scroll', checkScroll, false);
            window.addEventListener('resize', checkScroll, false);

        </script>

    </body>
</html>

解决方案

Using the isInViewport plugin and jQuery, here's my code for the task

$('video').each(function(){
    if ($(this).is(":in-viewport")) {
        $(this)[0].play();
    } else {
        $(this)[0].pause();
    }
})

这篇关于HTML5 和 Javascript 仅在可见时播放视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆