我为我的视频创建了一个插件,使用该插件,我可以将短代码用于具有自定义格式的视频,我使用了在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;
}
[由于IE不支持SVG元素的classList
,因此在IE中不起作用。您可以在this page中找到兼容性信息。该行发生错误:videoPlayButton.classList.add('is-hidden')
。
您可以在代码中添加this polyfill,它将在IE中正常运行。