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

When I click play on my video player it plays both videos on the page

本文关键字：播放 视频 两个 播放器 单击      更新时间：2024-04-27

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

这是我的小提琴：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。

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

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

例如

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

单击任一.btnPlay（来自任一视频）时，您将调用暂停功能。

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

你做错了几件事：

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

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

如果你看看这个小提琴，我在第二个.videoContainer中的每个类后面都加了一个"2"，这样你的命令就不会选择它。

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

相关文章：