Question

我的网站上有一些包含HTML5视频的叠加层。默认情况下，叠加层不可见，但可以通过单击某些图像来激活它们。

当叠加层处于非活动状态时，我希望HTML5视频也处于非活动状态。这没什么大不了的。当叠加层处于活动状态时（它会获得类active），包含的视频应获得属性autostart。再次关闭叠加层时，应从视频中删除autostart属性。

// Check if there are videos who have a grandgrandparent with the class `.active`
if ( $( 'video' ).parents( '.active' ).length ) {

    // Now I need the videos which suit this condition but I don’t know how

    // Add autoplay attribute to all these videos
    $( videos ).prop( 'autoplay', true );

} else {

    // Remove the autoplay attribute from all videos when the parent doesn’t have the class active
    $( videos ).prop( 'autoplay', false );

}

Answer 1

使用autostart ...

的错误方法

我终于想出了使用play();和pause();开始停止动画。

// Pause all videos by default
$( 'video' ).each(function () {
  $( this ).trigger( 'pause' );
});

// Start videos which have a parent with the class .active
$( '.active video' ).each(function () {
  $( this ).trigger( 'play' );
});

在HTML5视频上切换自动播放属性

1 个答案: