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:
Hier mein Video HTML:
Und hier mein Video JavaScript:
Kann mir jemand weiterhelfen?
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?
