Browser wird langsam nach Video-Rotation

geio

Grünschnabel
Hallo zusammen!

Ich lese mit PHP 4 Videos aus meiner Datenbank (Wordpress und ACF) und sortiere diese zufällig. Diese lasse ich dann mit JavaScript & jQuery nacheinander durchlaufen. Das funktioniert eine Weile auch sehr gut, doch nach einer gewissen Zeit und mehreren Durchläufen, hängt sich der Browser auf und der Rechner arbeitet auf Hochtouren. Ich nehme an, dass die Videos den Cache o.ä. volllaufen lassen....

Hier mal mein PHP Code:
$videos = get_sub_field('videos'); shuffle( $videos ); $videosJson = json_encode($videos);

Hier mein Video HTML:
<div class="video"> <div class="wrapper" style="width: <?php echo $bstyle; ?>; padding-top: <?php echo $abstandoben; ?>; padding-bottom: <?php echo $abstandunten; ?>;"> <div class="videowrapper"> <div class="playbtn" style="display: none;"><img src="<?php echo get_template_directory_uri(); ?>/img/playbtn.svg"></div> <video class="video" id="video-<?php echo $videocount; ?>" data-mobilepic="" data-mobilevideo="" data-desktoppic="" data-desktopvideo="" poster="" muted="muted"> <source id="videosrc-<?php echo $videocount; ?>" src="" type="video/mp4"></video> </div> </div> </div>

Und hier mein Video JavaScript:
<script> var vCount = 0; function initVideo(vCount) { console.clear(); var windowwidth = jQuery(document).width(); var videoid = "video-<?php echo $videocount; ?>"; var videosrc = "videosrc-<?php echo $videocount; ?>"; var videoobject = JSON.parse('<?php echo $videosJson; ?>'); var videoarraycount = videoobject.length; var videodesktop = videoobject[vCount]['video']['url']; var videomobile = videoobject[vCount]['videomobile']['url']; var videoposter = videoobject[vCount]['posterbild']['url']; var videopostermobile = videoobject[vCount]['posterbildmobile']['url']; var videobtn = videoobject[vCount]['btn']; if(videobtn=='white') { jQuery("#" + videoid).prev(".playbtn").css({ "filter" : "invert(1)" }); } else { jQuery("#" + videoid).prev(".playbtn").css({ "filter" : "none" }); } if(windowwidth <= 735) { jQuery("#" + videosrc).attr("src",videomobile); jQuery("#" + videoid).attr("poster",videopostermobile); } else { jQuery("#" + videosrc).attr("src",videodesktop); jQuery("#" + videoid).attr("poster",videoposter); } jQuery("#" + videoid).attr("data-mobilepic",videopostermobile); jQuery("#" + videoid).attr("data-mobilevideo",videomobile); jQuery("#" + videoid).attr("data-desktoppic",videoposter); jQuery("#" + videoid).attr("data-desktopvideo",videodesktop); document.getElementById(videoid).load(); document.getElementById(videoid).play(); vCount++; if(vCount>=videoarraycount) { vCount = 0; } jQuery("#" + videoid).on("ended", function() { initVideo(vCount); }); } jQuery(document).ready(function() { initVideo(vCount); }); jQuery(window).on('resize', function () { initVideo(vCount); }); </script>

Kann mir jemand weiterhelfen?
 

Sempervivum

Erfahrenes Mitglied
Beim ended-Event rufst Du jedes Mal die Funktion initVideo auf, wobei sämtliche Initialisierungen neu durchlaufen und vor allem der Eventlistener für das ended-Event ein weiteres Mal hinzu gefügt wird. Daher wird die Callback-Funktion für dieses Event mehrfach aufgerufen und immer häufiger. Ebenso beim Resize, hier kann eine Vielzahl von Aufrufen der Funktion initVideo erfolgen, weil dieses Event mehrfach feuert.

Ich empfehle, die generellen Initialisierungen nur beim document-ready zu machen und dann nur das was jeweils nötig ist, z. B. beim ended nur das src-Attribut neu setzen und weitere Attribute, die vom gespielten Video abhängig sind.
 
Zuletzt bearbeitet: