Question

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

Answer 1

由于IE不支持SVG元素/* ANALYSIS */ SELECT SHA2('privateKey',512); SELECT LENGTH(SHA2('privateKey',512)); SELECT UNHEX(SHA2('privateKey',512)); SELECT LENGTH(UNHEX(SHA2('privateKey',512))); /* INSERT ONWER */ INSERT INTO 01_tblCompany (ownerId, ownerPassword) VALUES ('owner001', AES_ENCRYPT('password123', UNHEX(SHA2('privateKey',512)))); /* SELECT ONWER */ SELECT ownerId, ownerPassword FROM 01_tblCompany WHERE ownerId = 'owner001' AND ownerPassword = AES_ENCRYPT('password123', UNHEX(SHA2('privateKey',512))); /* INSERT USER */ INSERT INTO 02_tblCompanyUsers (ownerId, userName, userPassword) VALUES ('owner001', 'user001', AES_ENCRYPT('password123', UNHEX(SHA2('privateKey',512)))); /* SELECT USER */ SELECT ownerId, userName, userPassword FROM 02_tblCompanyUsers WHERE userName = 'user001' AND userPassword = AES_ENCRYPT('password123', UNHEX(SHA2('privateKey',512)));，因此在IE中不起作用。您可以在this page中找到兼容性信息。该行中发生错误：classList。

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

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

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

1 个答案: