HTML5 und Javascript zum Abspielen von Videos nur wenn sichtbar

Ich bin daran interessiert, eine HTML-Seite mit mehreren Videoclips zu erstellen, so dass jeder Videoclip nur solange sichtbar abgespielt wird und dann pausiert, wenn er nicht sichtbar ist. Ich habe this great example gefunden, wie dies mit einem Clip implementiert werden kann, aber ich konnte den Code nicht ändern, um mit mehreren Clips zu arbeiten. Vielleicht muss ich diesen Code in eine Funktion für die einfache Wiederverwendbarkeit umwandeln? Hier ist, was ich bisher habe (JS Bin oben verlinkt für 2 Clips anstelle von einem geändert). Dieser Code scheint nur für einen der beiden Clips zu funktionieren.HTML5 und Javascript zum Abspielen von Videos nur wenn sichtbar

<!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>

Quelle

2014-01-16 UltrasoundJelly

Mit der isInViewport Plugin und jQuery, hier ist mein Code für die Aufgabe

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

Quelle

2014-11-27 10:43:44 qwazix

Ich versuche, diesen Code für mich arbeiten zu lassen, es ist viel einfacher. Ich habe jedoch Schwierigkeiten. Da ich zu einer Wordpress-basierten Website gewechselt habe, folgen meine Videos dem folgenden Beispielformat: 'class =" wp-video-shortcode "id =" video-1115-1 "' – UltrasoundJelly

Irgendeine Möglichkeit, [0] zu ändern damit arbeiten ist 'video-XXXX-X' formatieren? – UltrasoundJelly

Können wir bei Vimeo beantragen, dass es unter iframe läuft? Wie man? – wpcoder

OK, ich denke, es so etwas wie diese:

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

Quelle

2014-01-16 14:27:27 saike

Ich war immer ein „-Fraktion nicht definiert“ Reference, aber funktioniert perfekt einmal habe ich die Definition zurück: Fraktion = 0,8; – UltrasoundJelly

Ja, Fraktion muss nur irgendwo definiert werden - gute Antwort :) – alidrongo

Alte Frage, aber wollte nur meine zwei Cent hinzufügen, ich begann zunächst mit dem oben genannten jQuery-Code, stieß aber auf einige Probleme mit der Implementierung. Diese Lösung sollte mit mehreren Videos arbeiten, und verhindert auch ein Problem, wo der Benutzer ein Video pausiert und versucht weg zu bewegen und es beginnt gerade wieder:

<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>

ich ein paar Sachen gewaschen habe, und ich bin mit Video -js, so dass Sie es möglicherweise etwas ändern müssen, damit Ihre Implementierung funktioniert.

Quelle

2014-12-04 16:22:43 doveiya

Für den Fall, dass jemand anderes auf diese Frage eingeht, konnte ich Saikes Lösung nicht auf meiner WordPress-Seite verwenden, da die Videos automatisch eingebettet wurden (MediaElement-Player). Die Lösung von qwazix arbeitete jedoch mit einigen Modifikationen. Hier ist der jQuery-Code, der mit der IsInView plugin arbeitet. Hier sind meine Include-Skripte (am Ende von footer.php in meinem Themenordner platziert).

<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>

Und der jQuery-Code (ändern 400 auf Ihre Toleranz zu mögen)

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

Nur Problem, das ich mit diesem Code ist, dass es hat einen Videoclip auf Scroll neu starten auch durch die, wenn pausiert Benutzer. War auf meiner Website kein Problem, das Probleme verursacht. Hier ist der Code in Aktion: Ultrasoundoftheweek.com

Quelle

2014-12-05 18:24:35 UltrasoundJelly

Muss überprüft werden, ob das Video beim Scrollen sichtbar ist.

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

Quelle

2015-12-07 22:33:58

Mit jQuery, isInViewport und Coffeescript, sah die komplette Lösung für mich wie folgt aus:

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

Quelle

2016-02-20 16:36:25 pdobb

Keines der oben genannten schien für mich zu arbeiten, aber ich endlich einen Weg gefunden: Sie‘ ll Notwendigkeit the visible plugin, und dieses kleine Stück hier Code:

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

jedes Video Dies erlaubt nur zu spielen, wenn es in Ansichtsfenster bekommt. Indem Sie visible(true) durch visible() ersetzen, können Sie festlegen, dass nur wiedergegeben wird, wenn sich das gesamte Video-DOM-Element im Ansichtsfenster befindet.

Quelle

2016-07-25 10:46:55

Danke für diesen! –

So habe ich ein Video nur abgespielt, wenn der Benutzer dorthin scrollt. Ich habe das IsInViewport-Plugin verwendet. Hoffe, Sie finden es nützlich!

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

Quelle

2016-10-13 02:52:28

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

Quelle

2017-02-27 11:14:08

versucht, viele Lösungen, die nur eine teilweise Arbeits ist derjenige unten geschrieben. Das Problem ist, dass 3 Videos auf der Seite, der zweite und der dritte im Grunde von der ersten Seite gesteuert werden. Also fangen sie an zu spielen, wenn die Seite geladen ist (während sie im Ansichtsfenster abgespielt werden sollen) und sie werden pausiert, wenn die erste pausiert wird, irgendeinen Vorschlag, wie das mit mehreren Videos funktioniert? Mit getElementById versucht, aber nicht funktioniert, versuchte auch Jquery-Plugins, aber keine guten Ergebnisse. Hier haben Sie die www-Seite, wo Sie sehen können, was passieren und natürlich den Quellcode.

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

Quelle

2017-08-30 10:21:27

HTML5 und Javascript zum Abspielen von Videos nur wenn sichtbar

Antwort

Verwandte Themen