0

我正在为我的项目编辑在 html 5 中控制视频的方式，并通过图层叠加和一键播放和暂停。问题是我控制了很多具有相同课程的视频，当我播放一个视频时，另一个视频播放，所以我不知道如何解决它。

这是我的代码。

jQuery

$(document).ready(function () {
    $('.videobox').click(function () {
        if ($('.test').get(0).paused) {
            $('.videobox').css({
                opacity: 0
            });
            $('.test').get(0).play();
        } else {
            $('.test').get(0).pause();
            $('.videobox').css({
                opacity: 0.5
            });
        }
        e.preventDefault();

    });
    $('.test').bind("ended", function () {
        $('.videobox').css({
            opacity: 0.5
        });
    });
});

HTML

<div class="videobox" style="position: absolute; margin-left: 23px; z-index: 500; background-color: #000; opacity: 0.5; width: 473px; height: 474px;">
    <img src="image/camera.png" style="padding-top: 200px;">
</div>
<video class="test" width="473" height="474">
    <source src="video.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.
</video>
<div class="videobox" style="position: absolute; margin-left: 23px; z-index: 500; background-color: #000; opacity: 0.5; width: 473px; height: 474px;">
    <img src="image/camera.png" style="padding-top: 200px;">
</div>
<video class="test" width="473" height="474">
    <source src="video.mp4" type="video/mp4">
    <source src="movie2.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>
4

2 回答 2

2

您需要在事件目标的上下文中工作，使用this并遍历 DOM 到您需要的其他元素：

$('.videobox').click(function () {
    var $this = $(this);
    var video = $this.next('video')[0];

    if (video.paused) {
        $this.css({
            opacity: 0
        });
        video.play();
    } else {
        video.pause();
        $this.css({
            opacity: 0.5
        });
    }
    e.preventDefault();

});
$('.test').bind("ended", function () {
    $(this).prev('.videobox').css({
        opacity: 0.5
    });
});
于 2013-08-08T00:31:53.347 回答
0

一开始我没看懂你的问题。看起来您想要一个按钮一次播放多个视频。诀窍就在您的代码中：

$('.test').get(0).play();

您将获得与“.test”匹配的项目数组中的第一个元素，并切换该元素，而不是每个元素。您可以将其视为伪数组，并遍历：

var pArr = $('.test');
for (var ii=0; ii < pArr.length; ii++)
{
    pArr.get(ii).play();
}

你需要对“暂停”做同样的事情，但你不应该修改你的暂停检测，除非你想更好地处理错误。

于 2013-08-08T00:33:47.887 回答