Every time I hit the play button on my video player, it starts playing multiple videos simultaneously on the same page

Question

Every time I hit the play button on my video player, it starts playing multiple videos simultaneously on the same page

I'm having an issue with customizing a video player in HTML5. When I press play on the top video, it automatically plays both videos on the page simultaneously.

For reference, here is my code on jsfiddle: http://jsfiddle.net/BannerBomb/U4MZ3/27/

Below is a snippet of my 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="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="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>

Feel free to check out the CSS and JavaScript I used by following the provided jsfiddle link.

javascript html css video-player

Answer 1

Answer №1

There is a significant amount of code that needs to be modified, which would require a considerable amount of time. Therefore, I will provide an explanation of what is happening.

In most of your events, you are altering the classes and animations of elements selected with a class selector. This means that both videos are affected when only one is clicked or hovered over.

For example:

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

This code snippet calls the pause function when either .btnPlay (from either video) is clicked.

To fix this issue, you need to ensure that only the specific video being interacted with is selected by using $(this) or this, along with parent/child selectors.

Here are a couple of mistakes in your approach:

Ids should be unique. You cannot give both videos the same id="myVideo"; they should have different ids or the same class.
In your JS code, you use video[0] after defining video = $("#myVideo"). This syntax is incorrect because ids are unique, so you are actually only targeting the first element with that id anyway. While video[0] may work in some instances, it is not the proper way to select ids.

I suggest using parent/child selectors to ensure the correct video is targeted. Alternatively, you could duplicate the code and execute it separately for the second video (assuming you've corrected the code for the first video and created a new selector without using #myVideo).

In this fiddle, I added a "2" after every class within the 2nd .videoContainer so that your commands would not affect it.

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

Answer 2

There is a significant amount of code that needs to be modified, which would require a considerable amount of time. Therefore, I will provide an explanation of what is happening.

In most of your events, you are altering the classes and animations of elements selected with a class selector. This means that both videos are affected when only one is clicked or hovered over.

For example:

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

This code snippet calls the pause function when either .btnPlay (from either video) is clicked.

To fix this issue, you need to ensure that only the specific video being interacted with is selected by using $(this) or this, along with parent/child selectors.

Here are a couple of mistakes in your approach:

Ids should be unique. You cannot give both videos the same id="myVideo"; they should have different ids or the same class.
In your JS code, you use video[0] after defining video = $("#myVideo"). This syntax is incorrect because ids are unique, so you are actually only targeting the first element with that id anyway. While video[0] may work in some instances, it is not the proper way to select ids.

I suggest using parent/child selectors to ensure the correct video is targeted. Alternatively, you could duplicate the code and execute it separately for the second video (assuming you've corrected the code for the first video and created a new selector without using #myVideo).

In this fiddle, I added a "2" after every class within the 2nd .videoContainer so that your commands would not affect it.

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

Every time I hit the play button on my video player, it starts playing multiple videos simultaneously on the same page

Answer №1

Similar questions

Error: The selector "button" cannot be used in its current form as it is not pure. Pure selectors must include at least one local class or ID

Encountering a CORS error in my Next.js 13.4 application while attempting to retrieve JSON data

What could be causing the malfunction of my token rotation feature in nextAuth?

Unable to execute Javascript function within a click event handler

What is the best way to cycle through a JSON array of objects using JavaScript and jQuery?

A few of the input fields I filled out are not getting sent to the PHP script

The data that has been retrieved is not currently displayed within the Vue table

Tips for ensuring the Google+ JavaScript tag is W3C compliant

Is it possible to retrieve the value of a span in a PHP contact form instead of an input?

What is the reason that TypeScript does not automatically infer void & {} as the never type?

What is the process for integrating GitHub repository code into my client-side JavaScript application?

Using Html.BeginForm to route to a Web Api endpoint

Scripting method to transfer multiple subdirectories using a cpanel.yml file (excluding the use of the wildcard)

Can someone explain the process of utilizing forEach to add elements to an array using React's useState hook?

Presenting a data table in Angular

Silhouette as the backdrop image

Vue js homepage footer design

HTML5 canvas processing causing web worker to run out of memory

How can you incorporate AJAX to add a paragraph element to your HTML document?

Issue with Highcharts failing to render points on regular intervals