Fullpage.js - ビデオとページのサイズ変更の問題

Question

私はfullpage.jsを使用しています。私はバックグラウンドビデオのサイズを変更するonloadedmeta関数に問題があります。

ビデオでセクションIDを直接含むページURLにアクセスすると、完全に機能します。つまり、画面全体を占めるようにサイズが変更されます。

アクセスしようとしているセクションIDが背景ビデオのセクションではない場合は、以下のエラーが表示されます。このシナリオではビデオのサイズは正しく変更されますが、残りのページは上から144pxです。私はセクションをスクロールするために行くとき）。

エラー：キャッチされていない（約束している）DOMException：play（）要求がpause（）の呼び出しによって中断されました。

背景ビデオを含むセクションID以外のセクションIDを使用してページを更新すると、上記のエラーはスローされず、ページのサイズが正しく変更されますが、ビデオは表示されません。ビデオはデフォルトのサイズに過ぎません。

私は実際にこの問題に以前気付きませんでしたが、前述の問題のいくつかはやや散発的に見えます。今日私はフッタ（JSは含まれていません）を作成して、私のモバイルメニューを少し調整しましたが、それはJSの点ではそれほど変わっていません。

私は以下のJSファイルを貼り付けました。わかりますが、私はFullpageをSmoothstateと併用しています。

誰かから意見やフィードバックがありましたら、私は永遠に感謝しています。お時間を事前に非常に多くの

おかげで、

種類が

トム

編集について：私はセクション

(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

から動画を削除した場合、すべてが完璧に動作します最終的に私にとって最もクリーンな解決策は、単にCSSを使用してJQueryではなくビデオのサイズを変更することでした。私はまた、フルパージの組み込み機能に依存しています。ビデオを再生/一時停止するには、ビデオをビューポートに出入りするときではなく、自分で操作してみましょう。

DOM play（）例外がまだスローされていますが、多くのテストの後、フロントエンドに何らかの害を及ぼしているようには見えません。

#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%; } 
}