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

【问题标题】：Custom video plugin not working in IE browser自定义视频插件在 IE 浏览器中不起作用
【发布时间】：2020-05-16 05:49:03
【问题描述】：

我为我的视频创建了一个插件，通过这个插件，我可以使用我的自定义格式的视频的短代码我使用我在 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;
}

【问题讨论】：

标签： javascript jquery wordpress internet-explorer plugins

【解决方案1】：

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

您可以在代码中添加this polyfill，它可以在 IE 中正常运行。

参考链接： Code with classList does not work in IE?

【讨论】：

谢谢，但没用。有没有更好的办法让我有一个js播放按钮？
您能否解释一下“没有工作”的更多信息？ IE 11 中的控制台是否有任何错误？另外，能否提供相关的html代码？我使用this thread 中的代码示例，然后将classList.js polyfill 复制并粘贴到<script> 中，然后播放按钮可以在IE 11 中使用。