Custom video plugin not working in IE browser

Question

I created a plugin for my videos, with this plugin i can use short-code for videos with my custom format I used a code that I saw in jsfiddle for a big play button. it works fine in all browser but not in ie. I have tried to replace addeventlistener and setattribute but it did not help.

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)*/
            if (videoPlayButton.addEventListener) {
                       videoPlayButton.addEventListener("click", this.hideVideoPlayButton, false);
                }
            else {
                      videoPlayButton.attachEvent("onclick", 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="none" stroke-width="15" 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')*/
        video.attribute='controls'
    }
}

videoMethods.renderVideoPlayButton()

and here is the css

.video-wrapper {
position: relative;
}

.video-wrapper > video {
    width: 100%;
    vertical-align: middle;
}

.video-wrapper > video.has-media-controls-hidden::-webkit-media-controls {
    display: none;
}

.video-overlay-play-button {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px calc(50% - 50px);
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    opacity: 0.95;
    cursor: pointer;
    background-image: linear-gradient(transparent, #000);
    transition: opacity 150ms;
}

.video-overlay-play-button:hover {
    opacity: 1;
}

.video-overlay-play-button.is-hidden {
    display: none;
}

score 0 · Answer 1 · answered May 18 '20 at 02:51

0

It doesn't work in IE due to IE doesn't support classList for SVG elements. You could find the compatibility information in this page. The error occurs in this line: videoPlayButton.classList.add('is-hidden').

You could add this polyfill in your code and it will work well in IE.

Reference link: Code with classList does not work in IE?

answered May 18 '20 at 02:51

Yu Zhou

11,532
1
8
22

thanks but it did not work. is there any better way so i can have a js play button? – mina mo May 21 '20 at 07:28
Could you please explain more about "did not work"? Is there any error in console in IE 11? Besides, could you please provide related html code? I use the code sample in [this thread](https://stackoverflow.com/questions/43089846/displaying-a-play-button-on-multiple-videos-on-the-same-page) and just copy and paste the classList.js polyfill in the ` – Yu Zhou May 21 '20 at 08:24

Custom video plugin not working in IE browser

1 Answers1