Question

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

直接访问页面网址（包括带视频的部分ID）时效果很好。也就是说它调整大小以占据整个屏幕。

如果我尝试访问的部分ID不是带有背景视频的部分，我会看到以下错误 - 在这种情况下，视频正确调整大小，但其余页面从顶部开出144px（此错误自行修复时然后我去滚动章节。

错误：未捕获（在promise中）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。我还依靠Fullpage.js的内置功能来播放/暂停视频进出视口而不是试图自己操作它。

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

Fullpage.js - 视频＆amp;页面调整大小问题

1 个答案: