CODEWITHSUNDEEP
javascripthtmlcssbuttonvideo
Kylie Shelton
Kylie Shelton

Reputation: 33

Play button on video overlay - changing button text

I have a video slider on a page and I am trying to add a functional play button on top of the active video. I followed the tutorial here: https://codeconvey.com/add-html5-video-overlay-play-button/ The button is functional with pausing/playing the video; however, it does not change the text from "play" to "pause" on click. I am also trying to either change the opacity or hide the button so that the button doesn't cover the video while it's playing. I made a JSFiddle with the applicable code (but the button doesn't show up at all in the fiddle for some reason): https://jsfiddle.net/xasw7dqL I get the error message "$ is not defined" in the console so I'm sure it has something to do with that but I'm at a loss at what to do to define it. I haven't really implemented JavaScript in a site before. Thanks in advance for any help. Code below:
HTML: 

        <div class="image-slider-fade fade">
          <button class="_active">Play</button>
          <video id="vid1" controls>
            <source src="videos/testvid1.mp4" type="video/mp4">
            Your browser does not support the video.
          </video>
        </div>

CSS: 

#vid1, #vid2, #vid3, #vid4 {
    width: 100%;
    z-index: -1;
}

button {
    background-color: #666;
    border: medium none;
    color: #fff;
    display: block;
    font-size: 18px;
    left: 0;
    margin: 0 auto;
    padding: 8px 16px;
    position: absolute;
    right: 0;
    top: 50%;
}

button._active {
    opacity: 0.5;
}

button:hover {
    background-color: #e05a00;
}

JavaScript: 

//video play button

$(document).ready(function() {
    var ctrlVideo = document.getElementById("video");
    ('button').click(function() {
        if ($('button').hasClass("_active")) {
            ctrlVideo.play();
            $('button').html("Pause");
            $('button').toggleClass("_active");
        } else {
            ctrlVideo.pause();
            $('button').html("Play");
            $('button').toggleClass("_active");
        }
    });
});

Upvotes: 3

Views: 1529

Answers (1)

Pauline Nemchak
Pauline Nemchak

Reputation: 480

There're 3 things to fix:

  1. you wrote var ctrlVideo = document.getElementById("video"); but in html you use <video id="vid1" controls>. Change your js to: var ctrlVideo = document.getElementById("vid1");

  2. set z-index of your button, because now your button is behind the player and you can't press it (if you delete controls in html, you'll notice, that click is not triggered at all):

     button {
 background-color: #666;
 border: medium none;
 color: #fff;
 display: block;
 font-size: 18px;
 left: 0;
 margin: 0 auto;
 padding: 8px 16px;
 position: absolute;
 right: 0;
 top: 50%;
 z-index: 123;

    }

  3. line 5: add $ in the beginning $('button')

Also, to make jquery work on jsfiddle, add it in the window with your js code (in the dropdown)

Upvotes: 12

Related Questions