当我在我的视频播放器上单击播放时，它会在页面上播放两个视频答案

【问题标题】：When I click play on my video player it plays both videos on the page当我在我的视频播放器上单击播放时，它会在页面上播放两个视频
【发布时间】：2016-08-02 07:08:08
【问题描述】：

我正在尝试使用 HTML5 自定义制作视频播放器，当我在顶部视频上推送播放时，它会在页面上播放两个视频。

这是我的 jsfiddle：http://jsfiddle.net/BannerBomb/U4MZ3/27/

这是我的 HTML：

<!--Video 1-->
<section id="wrapper">
    <div class="videoContainer">
        <video id="myVideo" controls preload="auto" poster="http://s.cdpn.io/6035/vp_poster.jpg" width="380" >
            <source src="http://html-testing.github.io/2/videos/mikethefrog.mp4" type="video/mp4" />
            <p>Your browser does not support the video tag.</p>
        </video>
        <div class="caption">Video1</div>
        <div class="control">
            <div class="btmControl">
                <div class="btnPlay btn" title="Play/Pause video"><span class="icon-play"></span></div>
                <div class="progress-bar">
                    <div class="progress">
                        <span class="bufferBar"></span>
                        <span class="timeBar"></span>
                    </div>
                </div>
                <!--<div class="volume" title="Set volume">
                <span class="volumeBar"></span>
                </div>-->
                <div class="sound sound2 btn" title="Mute/Unmute sound"><span class="icon-sound"></span></div>
                <div class="btnFS btn" title="Switch to full screen"><span class="icon-fullscreen"></span></div>
            </div>
        </div>
    </div>
</section>

<!--Video 2-->
<section id="wrapper">
    <div class="videoContainer">

        <video id="myVideo" controls preload="auto" poster="http://s.cdpn.io/6035/vp_poster.jpg" width="380" >
            <source src="http://html-testing.github.io/2/videos/mikethefrog.mp4" type="video/mp4" />
            <p>Your browser does not support the video tag.</p>
        </video>
        <div class="caption">Video2</div>
        <div class="control">
            <div class="btmControl">
                <div class="btnPlay btn" title="Play/Pause video"><span class="icon-play"></span></div>
                <div class="progress-bar">
                    <div class="progress">
                        <span class="bufferBar"></span>
                        <span class="timeBar"></span>
                    </div>
                </div>
                <!--<div class="volume" title="Set volume">
                <span class="volumeBar"></span>
                </div>-->
                <div class="sound sound2 btn" title="Mute/Unmute sound"><span class="icon-sound"></span></div>
                <div class="btnFS btn" title="Switch to full screen"><span class="icon-fullscreen"></span></div>
            </div>

        </div>
    </div>
</section>

如果您查看我提供的 jsfiddle 链接，您可以看到我编写的 CSS 和 JavaScript。

【问题讨论】：

当我在 chrome 中查看您的 jsfiddle 结果时，每个视频都独立启动和停止。也许您看到的行为是特定于浏览器的？我使用的是 Chrome 版本 49.0.2623.110 m

标签： javascript html css video-player

【解决方案1】：

要更改的代码太多，需要很长时间，所以我将解释发生了什么。

在几乎所有事件中，您都在影响您使用类选择器选择的元素的类和动画。当您这样做时，您正在选择两个视频共享的元素，因此当只有一个被单击/悬停时会影响两个视频。

例如

$('.btnPlay').on('click', function() { playpause(); } );

在这里，当单击 .btnPlay（来自任一视频）时，您正在调用暂停函数。

您只需要使用$(this) 或this 以及父/子选择器的组合来选择点击的视频，以确保您只对点击/悬停的视频执行操作。

你做错了几件事：

ID 是唯一的，您不能同时提供video id="myVideo"，它们需要不同的 ID 或相同的类。
在您的 JS 中，video[0] 在 video = $("#myVideo") 之后编写，这是无法完成的，因为 id 是唯一的，因此无论如何您只能获取具有该 id 的第一个元素。 video[0] 在某些代码中适用于您，但对于 id 选择器来说，它远不适合。

我建议使用父/子选择器来确保您选择了正确的视频，或者您可以复制代码并为第二个视频单独执行（假设您修复了第一个视频的代码并创建了另一个不使用的选择器#myVideo)。

如果你看一下这个小提琴，我在第二个.videoContainer 内的每个类之后添加了一个“2”，这样你的命令就不会选择它。

http://jsfiddle.net/U4MZ3/30/

【讨论】：