javascript - Fullpage.js - 视频和页面调整大小问题

Question

我正在使用 fullpage.js，但在使用调整背景视频大小的 onloadedmeta 函数时遇到问题。

直接访问包含视频部分 ID 的页面 URL 时效果非常好。也就是说，它会调整大小以占据整个屏幕。

如果我尝试访问的部分 ID 不是带有背景视频的部分，我会看到以下错误 - 在这种情况下，视频会正确调整大小，但其余页面距顶部 144px(此错误会在以下情况下自行修复)然后我会滚动浏览各个部分)。

错误:未捕获( promise 中)DOMException:play() 请求被暂停() 调用中断。

当我使用除包含背景视频的部分 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。我还依靠 Fullpage.js 的内置功能在视频进出视口(viewport)时播放/暂停视频，而不是尝试自己操作它。

仍然会抛出 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%; }
}