Question

我有设置视频的div，这样当我点击播放按钮（.video-play-container）时，视频会淡入，然后当我点击关闭按钮（.close-video）时，视频淡出。问题是当视频淡出时，它一直在后台播放。因此，我使用此行（src）清空'$(.youtube-player').attr('src', '');。但是，如果用户不需要再次看到视频，这将是很好的。但是如果他想要重新打开视频，那么src现在是空的，所以他看不到视频。如何在我已将其取出后恢复src，以便用户可以多次观看视频？

$('.video-play-container').click(function( e ){
    e.preventDefault();
    $('.video-play-container').fadeOut(500);
    $('.overlay').fadeIn(500).show();
    $('#feat-video').fadeIn(500).show();
});

$('.close-video').click(function( e ){
    e.preventDefault();
    $('#feat-video').fadeOut(500);
    $('.youtube-player').attr('src', '');
    $('.overlay').fadeOut(500);
    $('.video-play-container').show().fadeIn(500);
});

编辑：更新代码

var src;
src = $('.youtube-player').attr('src');

$('.video-play-container').click(function( e ){
    e.preventDefault();
    $('.video-play-container').fadeOut(2000);
    $('.overlay').fadeIn(2000).show();
    $('#feat-video').fadeIn(2000).show();
});

$('.close-video').click(function( e ){
    e.preventDefault();
    $('#feat-video').fadeOut(2000);
    $('.youtube-player').attr('src', '');
    $('.overlay').fadeOut(2000);
    $('.video-play-container').show().fadeIn(2000);
    $('.youtube-player').attr('src', src);
});

编辑：更新了代码2

var src;
src = $('.youtube-player').attr('src');

$('.video-play-container').click(function( e ){
    e.preventDefault();
    $('.video-play-container').fadeOut(2000);
    $('.overlay').fadeIn(2000).show();
    $('#feat-video').fadeIn(2000).show();
});

$('.close-video').click(function( e ){
    e.preventDefault();
    $('#feat-video').fadeOut(2000);
    $('.overlay').fadeOut(2000);
    $('.video-play-container').show().fadeIn(2000);
    $('.youtube-player').attr('src', '');
    $('.youtube-player').attr('src', src);
});

编辑：更新了代码3

var src;
src = $('.youtube-player').attr('src');

$('.video-play-container').click(function( e ){
    e.preventDefault();
    $('.video-play-container').fadeOut(2000);
    $('.overlay').fadeIn(2000).show();
    $('#feat-video').fadeIn(2000).show();
});

$('.close-video').click(function( e ){
    e.preventDefault();
    $('#feat-video').fadeOut(2000);
    $('.overlay').fadeOut(2000, function() {
        $('.youtube-player').attr('src', '');
    });
    $('.video-play-container').show().fadeIn(2000);
    $('.youtube-player').attr('src', src);
});

编辑：更新了代码4（最终）

var src;
src = $('.youtube-player').attr('src');

$('.video-play-container').click(function( e ){
    e.preventDefault();
    $('.video-play-container').fadeOut(2000);
    $('.overlay').fadeIn(2000).show();
    $('#feat-video').fadeIn(2000).show();
});

$('.close-video').click(function( e ){
    e.preventDefault();
    $('#feat-video').fadeOut(2000);
    $('.overlay').fadeOut(2000, function() {
        $('.youtube-player').attr('src', '');
        $('.youtube-player').attr('src', src);
    });
    $('.video-play-container').show().fadeIn(2000);
});

Answer 1

这几乎是XY problem的定义，但如果你坚持......要保存和恢复属性，

var src;
src = $('.youtube-player').attr('src');
$('.youtube-player').attr('src', '');
// do something else
$('.youtube-player').attr('src', src);

要保存和恢复标签的内容，

var html;
html = $('.youtube-player').html();
$('.youtube-player').empty();
// do something else
$('.youtube-player').html(html)

编辑：

为什么不在淡出结束时杀死玩家？

我做到了（你可以在上面的更新代码中看到），但它看起来仍然有闪烁

你不那样做了。 hide(2000)是异步。它将淡入淡出队列，然后立即清除src并立即将其放回原位。因此，在淡入淡出完成之前，当视频消失然后开始重新加载时，闪烁。您想在hide上使用动画结束回调：

$('.overlay').fadeOut(2000, function() {
  $('.youtube-player').attr('src', '');
  // ...
});

Answer 2

直接回答您的问题：

使用Jquery将src存储在youtube-player的data属性中。

因此您的代码将是：

$('.video-play-container').click(function( e ){
    //Check if src is present, else fetches it in the data attribute of the element
    $('.youtube-player').attr('src') || $('.youtube-player).attr('src',$(this).data('src'))
    e.preventDefault();
    $('.video-play-container').fadeOut(500);
    $('.overlay').fadeIn(500).show();
    $('#feat-video').fadeIn(500).show();
});

$('.close-video').click(function( e ){
    e.preventDefault();
    $('#feat-video').fadeOut(500);
    //Stores the src in the data attribute before wiping the src clean.
    $('.youtube-player').data('src',$(this).attr('src'));
    $('.youtube-player').attr('src', '');
    $('.overlay').fadeOut(500);
    $('.video-play-container').show().fadeIn(500);
});

如果你有一个youtube播放器，另一个建议是使用ID，而不是类。在同一页面上有几个会使上面的代码错误。

用jQuery清空一个div然后把它放回去？

2 个答案: