web-dev-qa-db-ja.com

表示されている場合にのみビデオを再生するHTML5およびJavascript

各ビデオクリップが表示されている間のみ再生され、表示されなくなったときに一時停止するように、複数のビデオクリップでHTMLページを設定することに興味があります。

この素晴らしい例 これを1つのクリップで実装する方法を見つけましたが、複数のクリップで動作するようにコードを変更することができませんでした。おそらく、このコードを簡単に再利用できるように関数に変換する必要がありますか？

ここに私が持っているものがあります（上記でリンクされたJS Binは1つではなく2つのクリップ用に変更されています）。

このコードは、2つのクリップのうち1つだけで機能するようです。

<!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>
javascripthtmlhtml5videohtml5-video
15
UltrasoundJelly

isInViewport プラグインと jQuery を使用して、タスクのコードを作成します

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

OK、私は思う、それはこのようなものでなければなりません：

var videos = document.getElementsByTagName("video");

function checkScroll() {

    for(var i = 0; i < videos.length; i++) {

        var video = videos[i];

        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();
            }

    }

}

window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);
16
saike

上記のどれも私にはうまくいかないようでしたが、最終的に方法を見つけました： visibleプラグイン と、この小さなコードが必要です：

_$(window).scroll(function() {
    $('video').each(function() {
        if ($(this).visible(true)) {
            $(this)[0].play();
        } else {
            $(this)[0].pause();
        }
    })
});
_

これにより、ビデオがビューポートに入ったときにのみビデオを再生できます。 visible( true )をvisible()に置き換えることにより、ビデオDOM要素全体がビューポートにあるときにのみ再生するように設定できます。

13
Pierre Olivier Tran

スクロール中にビデオが表示されるかどうかを確認する必要があります。

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

古い質問ですが、2セントを追加したかったので、最初は上記のjQueryコードから始めましたが、実装でいくつかの問題に遭遇しました。このソリューションは、複数のビデオで動作するはずです。また、ユーザーがビデオを一時停止し、スクロールしようとして再び開始するという問題を防ぎます。

<script>
    var videoList = [];
    var scrollPauseList = [];
    var clickedPauseList = [];
</script>
<script>    
    var myScrollFunc = function() {

        $(".video-js").each(function(){ 

            var inView = $(this).is(":in-viewport");
            var isPaused = $(this)[0].player.paused();
            var playerIdx = videoList.indexOf(this.id);
            var scrollPaused = scrollPauseList[playerIdx];
            var clickPaused = clickedPauseList[playerIdx];

            if (inView) {                       
                var hasEnded = $(this)[0].player.ended();
                var curTime = $(this)[0].player.currentTime();
                var hasStarted = curTime > 0;
                if(hasStarted && !hasEnded && !clickPaused)
                {
                    scrollPauseList[playerIdx] = false;
                    $(this)[0].player.play();
                }
            } else if(!isPaused) {                      
                scrollPauseList[playerIdx] = true;
                $(this)[0].player.pause();
            }
        });
    };      

    $(window).scroll(myScrollFunc);     
</script>   

<video  
  class="video-js" controls></video>

<script>
$(".video-js").each(function(){ 
        videoList[videoList.length] = this.id;
        scrollPauseList[scrollPauseList.length] = false;
        clickedPauseList[scrollPauseList.length] = false;
    }); 

for(var i = 0; i < videoList.length; i++)
{
    var playerID = videoList[i];
    var player = videojs(playerID);

    player.on('pause', function() {
        var pID = videoList.indexOf(this.id());

        if(!scrollPauseList[pID])
        {
            clickedPauseList[pID] = true;
            scrollPauseList[pID] = false;
        }
        else
        {
            clickedPauseList[pID] = false;
            scrollPauseList[pID] = false;
        }
    });
}       
</script>

私はいくつかのものをスクラブしましたが、私はvideo-jsを使用していますので、実装を機能させるために少し変更する必要があるかもしれません。

2
doveiya

多くのソリューションを試しましたが、部分的に機能しているのは以下に掲載されているものだけです。問題は、ページに3つのビデオがあり、2番目と3番目のビデオが基本的に最初のビデオによって制御されることです。

したがって、ページがロードされると（ビューポートで再生することになっている間）再生を開始し、最初の一時停止で一時停止します。

getElementByIdを使用してみましたが、機能しませんでした。jqueryプラグインも試しましたが、良い結果は得られませんでした。

ここには、何が起こるか、そしてもちろんすべてのソースコードを見ることができるwwwページがあります。

http://185.197.128.183/~monompro/

window.onload = function() {

    var videos = document.getElementsByTagName("video"),
        fraction = 0.8;

    function checkScroll() {

        for (var i = 0; i < videos.length; i++) {

            var video = videos[i];

            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();
            }

        }

    }

    window.addEventListener('scroll', checkScroll, false);
    window.addEventListener('resize', checkScroll, false);
}
2
Me on the web

JQuery、 isInViewport 、およびCoffeescriptを使用すると、完全なソリューションは次のようになりました。

$(window).scroll ->
  $('video:in-viewport').each -> $(@)[0].play()
  $('video:not(:in-viewport)').each -> $(@)[0].pause()
1
pdobb

他の誰かがこの質問に出くわした場合、ビデオが自動的に埋め込まれた方法（MediaElementプレーヤー）のために、WordPressサイトでSaikeのソリューションを使用できませんでした。変更： IsInViewプラグイン で動作するjQueryコードは次のとおりです。インクルードスクリプト（テーマフォルダーのfooter.phpの最後に配置）です。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/isInViewport.min.js" type="text/javascript"></script>
<script src="js/scrollview.min.js" type="text/javascript"></script>

そして、jQueryコード（400を好みに合わせて変更します）

  $(function() {
      $(window).scroll(function() {
          $('.wp-video-shortcode').each(function() {
              var str = $(this).attr('id');
              var arr = str.split('_');
              typecheck = arr[0];
              if ($(this).is(":in-viewport( 400 )") && typecheck == "mep") {
                  mejs.players[$(this).attr('id')].media.play();
              } else if (typecheck == "mep") {
                  mejs.players[$(this).attr('id')].media.pause();
              }
          });
      });
  });

私がこのコードで持っている唯一の問題は、ユーザーによって一時停止されていても、スクロール時にビデオクリップをdoes再開することです。私のサイトでは契約を破る問題ではありませんでした。コードは次のとおりです。 ltrasoundoftheweek.com

1
UltrasoundJelly

これは、ユーザーがスクロールしたときにのみビデオを再生する方法です。 IsInViewportプラグインを使用しました。お役に立てば幸いです！

$(window).scroll(function() {

    var video = $('.yourvideo');

    $(video).each(function(){

        if(video.is(':in-viewport')){

            video[0].play();

            video.removeClass('yourvideo');
            //I removed class to stop repeating the action ".play()" when it is scrolled again.
        }
    });
});
1
Leandro Videla