Fullpage.js - Video & Seite Größenanpassung Probleme

Question

Ich benutze Fullpage.js und ich habe ein Problem mit der Onloadedmeta Funktion, die Größe meines Hintergrundvideos.

Es funktioniert perfekt beim Zugriff auf die Seite URL direkt einschließlich der Abschnitt ID mit dem Video. Das bedeutet, dass die Größe geändert wird, um den gesamten Bildschirm aufzunehmen.

Wenn die Abschnitts-ID, auf die ich zugreifen möchte, nicht der Abschnitt mit dem Hintergrundvideo ist, sehe ich den folgenden Fehler - in diesem Szenario wird das Video korrekt skaliert, aber die restlichen Seiten sind 144px von oben (dieser Fehler behebt sich selbst) wenn ich dann gehe, um durch Abschnitte zu scrollen).

Fehler: Uncaught (in Versprechen) DOMException: Die Anforderung play() wurde durch einen Aufruf von pause() unterbrochen.

Wenn ich die Seite mit einer anderen Abschnitts-ID als der Abschnitts-ID aktualisiere, die das Hintergrundvideo enthält, wird der obige Fehler nicht ausgegeben und die Seiten werden korrekt skaliert - das Video jedoch nicht. Das Video ist nur die Standardgröße.

Ich habe dieses Problem vorher nicht wirklich bemerkt und einige der oben genannten Probleme scheinen etwas sporadisch zu sein. Heute habe ich die Fußzeile erstellt (die kein JS enthält) und mein mobiles Menü ein wenig angepasst, aber nicht anders als es in Bezug auf JS war.

Ich habe die JS-Datei unten eingefügt - wie Sie sehen werden, verwende ich Fullpage in Verbindung mit Smoothstate.

Wenn jemand irgendwelche Vorschläge oder Feedback hat, wäre ich ewig dankbar.

Vielen Dank im Voraus für Ihre Zeit,

Mit freundlichen Grüßen

Tom

Edit: alles funktioniert perfekt, wenn ich das Video aus dem Abschnitt

(function($) { 
    function addFullPage() { 

    if($('html').hasClass('fp-enabled')) { 
     $.fn.fullpage.destroy('all'); // uninitialise fullpage 
    } 

    $('#fullpage').fullpage({ 
     anchors: [ '2d', '3d', 'character','motionandgraphics', 'vfx', 'footer' ], 
     scrollOverflow: false, 
     fixedElements: '#masthead', 
     afterLoad: function(anchorLink, index) { 
     if(index == 1) { 
      console.log('afterload function'); 
      $('#video').get(0).play(); 
     } 
     } 
    }); 

    $('#section0 video').on('loadedmetadata', function() { 

     console.log('onloadedmetadata function'); 

     var $width, $height, // Width and height of screen 
     $vidwidth = this.videoWidth, // Width of video (actual width) 
     $vidheight = this.videoHeight, // Height of video (actual height) 
     $aspectRatio = $vidwidth/$vidheight; // The ratio the video's height and width are in 

     (adjSize = function() { // Create function called adjSize 
     $width = $(window).width(); // Width of the screen 
     $height = $(window).height(); // Height of the screen 

     $boxRatio = $width/$height; // The ratio the screen is in 

     $adjRatio = $aspectRatio/$boxRatio; // The ratio of the video divided by the screen size 

     // Set the container to be the width and height of the screen 
     $('#section0').css({ 'width' : $width+'px', 'height' : $height+'px' }); 

     if($boxRatio < $aspectRatio) { // If the screen ratio is less than the aspect ratio.. 
      // Set the width of the video to the screen size multiplied by $adjRatio 
      $vid = $('#section0 video').css({ 'width' : $width*$adjRatio+'px' }); 
     } else { 
      // Else just set the video to the width of the screen/container 
      $vid = $('#section0 video').css({ 'width' : $width+'px' }); 
     } 

     })(); // Run function immediately 

    // Run function also on window resize. 
    $(window).resize(adjSize); 

    }); 

    function iedetect(v) { 
     var r = RegExp('msie' + (!isNaN(v) ? ('\\s' + v) : ''), 'i'); 
     return r.test(navigator.userAgent); 
    } 

    } 

    $(document).ready(function(){ 
    addFullPage(); 
    console.log('document ready function'); 
    mobMenu(); 
    }); 

    function addBlacklistClass() { 

    $('a').each(function() { 
     if (this.href.indexOf('/wp-admin/') !== -1 || this.href.indexOf('/wp-login.php') !== -1) { 
     $(this).addClass('wp-link'); 
     } 
    }); 

    } 

$(function() { 

    addBlacklistClass(); 

    var settings = { 
     anchors: 'a', 
     blacklist: '.wp-link', 
     onStart: { 
     duration: 1000, 
     render: function ($container) { 
      $('#content').addClass('fade-out'); 
     } 
     }, 
     onAfter: function($container) { 

     addFullPage(); 
     console.log('on after function in smoothstate'); 
     mobMenu(); 

     $('#content').removeClass('fade-out'); 

     var $hash = $(window.location.hash); 

     if ($hash.length !== 0) { 
      var offsetTop = $hash.offset().top; 
      $('body, html').animate({ 
      scrollTop: (offsetTop - 60), 
      }, { 
      duration: 280 
      }); 
     } 

     } 
    }; 

    $('#page').smoothState(settings); 

    }); 

})(jQuery); 

Answer 1

entfernen Letztendlich war die sauberste Lösung für mich, einfach CSS zu verwenden, um das Video anstatt JQuery zu skalieren. Ich verlasse mich auch auf die integrierte Funktionalität von Fullpage.js, um das Video beim Ein- und Ausblenden des Ansichtsfensters zu spielen/pausieren, anstatt es selbst zu manipulieren.

Die DOM play() - Ausnahme wird immer noch geworfen, aber nach vielen Tests scheint es nicht, als ob es Schaden am Front-End verursacht.

#fullpage .section video { position:absolute; top:0; left:0; width:100%; height:100%; display:none; } 

@media (min-aspect-ratio:16/9) { 
    #fullpage .section video { width:100%; height:auto; } 
} 

@media (max-aspect-ratio:16/9) { 
    #fullpage .section video { width:auto; height:100%; } 
}