我为我的视频创建了一个插件,使用该插件,我可以将短代码用于具有自定义格式的视频,我使用了在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;
}
答案 0 :(得分:0)
由于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中正常运行。