【发布时间】：2017-02-26 21:20:22
【问题描述】：
我正在使用 fullpage.js，但我在调整背景视频大小的 onloadedmeta 函数时遇到问题。
当直接访问包含视频的部分 ID 的页面 URL 时，它可以完美运行。也就是说它会调整大小以占据整个屏幕。
如果我尝试访问的部分 id 不是带有背景视频的部分，我会看到以下错误 - 在这种情况下，视频会正确调整大小，但剩余页面距离顶部 144 像素（此错误会自行修复然后我会滚动浏览部分）。
错误：未捕获（承诺中）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 );
【问题讨论】：
-
我认为这会有所帮助：stackoverflow.com/questions/36803176/…。旁注：使用 jQuery，您在设置宽度和高度时不需要指定 'px' - css({width: $width}) 无论如何都会默认为 px
-
您使用的是最新的 fullpage.js 版本吗？你能在 jsfiddle 或 codepen 中提供重现吗？
标签： javascript jquery fullpage.js