Question

是的，我正在尝试播放和暂停多个视频。

所以，如果我玩一个，我应该暂停其他人一个。视频本身应该是模糊的，但不是在播放。希望有道理吗？

JS：

$(function () {

 var filters = "blur(" + blur + ")";
$('.video-thumbnail').on('click', function () {
    // Just go ahead and pause/reset all the video elements
    $('video').each(function () {
        this.pause();
        this.currentTime = 0;
        $('video').css('-webkit-filter', filters);
    });

    $('#' + $(this).data('video-id')).get(0).play();
});





});

Answer 1

如果我理解正确的话，我认为这就是你所喜欢的。

$('audio,video').bind('play', function() {
    activated = this;
    $('audio,video').each(function() {
        if(this != activated) this.pause();
    });
});

基本上只是检查这不是我们刚刚点击的视频，并暂停它们。

这是你更新过的小提琴：

http://jsfiddle.net/1frjov8e/1/

根据评论的要求编辑。我想我已经成功地模糊了其他视频。您可以将实际的CSS更改为您喜欢的任何内容。我使用的css过滤器没有广泛的支持。这是更新的小提琴：

http://jsfiddle.net/1frjov8e/14/

及相关代码：

JQuery的：

$('audio,video').bind('play', function() {
    activated = this;
    $('audio,video').each(function() {
        var clickedVideo = $(this);
        if(this != activated){ 
            this.pause();
            clickedVideo.addClass('blurme');
        }
        else {
            clickedVideo.removeClass('blurme');
        }

    });
});

CSS：

.blurme {
    -webkit-filter: blur(2px) grayscale(.5) opacity(0.8);
}

播放和暂停多个html5视频，并在暂停时模糊

1 个答案: