javascript - 自定义视频插件在 IE 浏览器中不起作用

问题描述

我为我的视频创建了一个插件，通过这个插件，我可以使用我的自定义格式的视频短代码我使用我在 jsfiddle 中看到的一个大播放按钮的代码。它在所有浏览器中都可以正常工作，但在 ie 中却不行。我试图替换 addeventlistener 和 setattribute 但它没有帮助。

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()

这是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;
}

标签： javascriptjquerywordpressinternet-explorerplugins

classList由于 IE 不支持SVG 元素，它在 IE 中不起作用。您可以在此页面中找到兼容性信息。错误发生在这一行：videoPlayButton.classList.add('is-hidden')。

你可以在你的代码中添加这个 polyfill，它会在 IE 中运行良好。

参考链接：带有classList的代码在IE中不起作用？

javascript - 自定义视频插件在 IE 浏览器中不起作用

问题描述

解决方案

推荐阅读