Question

我试图在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。

Answer 1

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

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

e.g。

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

当您点击.btnPlay（来自任一视频）时，您正在调用暂停功能。

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

你做错了几件事：

ID 唯一，您不能同时提供video id="myVideo"，他们需要不同的ID或同一个类。
在你的JS中写video[0]之后video = $("#myVideo")无法完成，因为ids是唯一的，因此你只是抓住带有那个id的第一个元素。 video[0]在某些代码中适合您，但它对于id选择器来说是不合适的。

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

如果你看这个小提琴，我加了一个＆＃34; 2＆＃34;在第二个.videoContainer内的每个课程之后，所以你的命令不会选择它。

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

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

1 个答案: