javascript - Displaying a Play button on Multiple videos on the same page

Question

I'm a complete novice when it comes to Javascript (& copy and paste kind of guy ;)... so I'm having a bit of a problem trying to figure out how to do the following:

• I've got a slideshow gallery that has 2 mp4 videos in the same set
• I've found some javascript that overlays a play button on the mp4 video
• However... the code work fine when I have one video - but when I place the 2nd video, I'm failing to get the overlaid arrows working on both...

There's an obvious problem with clashing classes / variables (or something to that effect) - but I can't figure it out...

HTML:

<div class="swiper-slide">
    <div class="video-wrapper">
        <video controls preload="metadata" class="pure-img video" poster="assets/posters/poster_adele-BBC.jpg">
            <source src="http://d1wv6pnepp7p5s.cloudfront.net/AA_BBC_ALL_CUTDOWN_02.mp4" type="video/mp4"></source>
        </video>
    </div>
</div>         

<div class="swiper-slide">
    <div class="video-wrapper-two">
        <video controls preload="metadata" class="pure-img video" poster="assets/posters/poster_adele-BBC.jpg">
            <source src="http://d1wv6pnepp7p5s.cloudfront.net/AA_BBC_ALL_CUTDOWN_02.mp4" type="video/mp4"></source>
        </video>
    </div>
</div>    

Javascript:

<script>

var videoPlayButton,
videoWrapper = document.getElementsByClassName('video-wrapper')[0],
video = document.getElementsByTagName('video')[0],
videoMethods = {
    renderVideoPlayButton: function() {
        if (videoWrapper.contains(video)) {
            this.formatVideoPlayButton()
            video.classList.add('has-media-controls-hidden')
            videoPlayButton = document.getElementsByClassName('video-overlay-play-button')[0]
            videoPlayButton.addEventListener('click', this.hideVideoPlayButton)
        }
    },

    formatVideoPlayButton: function() {
        videoWrapper.insertAdjacentHTML('beforeend', '
            <svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video">
                <circle cx="100" cy="100" r="90" fill="#000" stroke-width="5" stroke="#fff"/>
                <polygon points="70, 55 70, 145 145, 100" fill="#fff"/>
            </svg>
        ')
    },

    hideVideoPlayButton: function() {
        video.play()
        videoPlayButton.classList.add('is-hidden')
        video.classList.remove('has-media-controls-hidden')
        video.setAttribute('controls', 'controls')
    }
}

videoMethods.renderVideoPlayButton()

</script>

The javascript handles the 1st wrapper fine, I'm just having difficulty getting the 2nd wrapper to display the Play button correctly...

Any help appreciated.

Answer 1

<div class="swiper-slide"> <div class="video-wrapper-two"> <video controls preload="metadata" class="pure-img video" poster="assets/posters/poster_adele-BBC.jpg"> <source src="http://d1wv6pnepp7p5s.cloudfront.net/AA_BBC_ALL_CUTDOWN_02.mp4" type="video/mp4"></source> </video> </div> </div>

So let's focus on these lines. Your first error in HTML is renaming the 'video-wrapper' class to 'video-wrapper-two' on the second element. It must be the same if you plan to reuse the elements in JavaScript.

Your second error is referencing only the first 'video-wrapper' from your array instead of getting them all videoWrapper = document.getElementsByClassName('video-wrapper')[0]

Instead you would need this

videoWrappers = document.getElementsByClassName('video-wrapper');
videos = document.getElementsByTagName('video');

The third problem needs a bit more code, because at the moment you baked in the single videoElement item into your functions, so you can't call it on each. So instead of referencing the videos from the function, you have to pass it as a reference (as a function parameter) so you could do something like this when you call it

for(var i = 0; i < videWrappers.length; i++){
    // it will be called on each video element one by one
    videoMethods.renderVideoPlayButton(videoWrappers[i], video[i]); 
}

The key point is to never bake variables into your functions, instead always use function parameters so you can reuse those functions whenever you need it.