我正在一个 WordPress 网站上工作,下面的代码可以按照我想要的方式工作(只播放一次,最后出现“重播”按钮)
我希望它在滚动到 ie 时开始播放。在视口中。
我在这里看到了几种不同的方法来实现这一点,但我无法让它们与我当前的代码很好地配合。
HTML
<div class="spacer">
</div>
<div class="video-wrapper">
<video id="bVideo" muted autoplay>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>
<div id="playButton" class="playButton" onclick="playPause()"></div>
<div class="replayButton" id="replayButton" onclick="playPause()">REPLAY ↻</div>
</div>
<script>
var bunnyVideo = document.getElementById("bVideo");
var el = document.getElementById("playButton");
var replay = document.getElementById("replayButton");
replay.style.visibility = "hidden";
function playPause() {
if (bunnyVideo.paused)
{
bunnyVideo.play();
replay.className = "replayButton";
replay.style.visibility = "hidden";
}
else
{
bunnyVideo.pause();
el.className = "playButton";
replay.className = "";
}
}
function playPauseControls() {
if (!bunnyVideo.paused) {
el.className ="";
replay.className = "";
} else {
el.className = "playButton";
replay.className = "";
}
}
function videoEnd() {
replay.className = "replayButton";
replay.style.visibility = "visible";
el.className = "";
}
function showControls(){
bunnyVideo.setAttribute("controls","controls");
}
function hideControls(){
bunnyVideo.removeAttribute("controls","controls");
}
/*Google Analytics Tracker Function*/
/*Assuming you've already set up the Google Analytics script function on your webpage. This just activates a trigger event when the video plays.*/
/*function bunnyVideoView() {
ga('send', 'event', {
'eventCategory': 'Bunny Video',
'eventAction': 'play',
'eventLabel': 'Bunny Video View'
});
}*/
bunnyVideo.addEventListener("play", playPauseControls, false);
bunnyVideo.addEventListener("pause", playPauseControls, false);
bunnyVideo.addEventListener("mouseout", hideControls, false);
bunnyVideo.addEventListener("ended", videoEnd, false);
/*Google Analytics Tracker*/
/*bunnyVideo.addEventListener("play", bunnyVideoView, false);*/
</script>
CSS
.spacer {
height: 400px;
}
.video-wrapper {
position: relative;
max-width: 680px;
}
.video-wrapper > video {
width: 100%;
max-width: 100%;
box-sizing: border-box;
vertical-align: middle;
cursor: pointer;
}
/* Hide iOS Play Button */
video::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
.playButton {
border-radius: 100px;
border: 8px solid #fff !important;
height: 100px;
position: absolute;
width: 100px;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
cursor: pointer;
display: block;
opacity: 0.95;
transition: opacity 400ms;
}
.playButton:before {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 50px;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 0;
left: 0;
right: -10px;
bottom: 0;
margin: auto;
}
.replayButton {
color: black;
position: relative;
text-align: center;
margin: auto;
margin-top: 0px;
cursor: pointer;
display: block;
opacity: 0.95;
transition: opacity 150ms;
}
.replayButton:hover, .replayButton:focus {
color: #ea7200;
}
.replayButton:before {
height: 45px;
width: 45px;
position: absolute;
top: 18px;
left: 18px;
content: '';
display: block;
border-color: transparent white white white;
border-radius: 50%;
border-style: solid;
border-width: 8px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.replayButton:after {
border-color: transparent transparent transparent white;
border-style: solid;
border-width: 0 45px 22px 22px;
height: 0;
position: absolute;
top: 40px;
left: 15px;
bottom: 0;
right: 0;
width: 0;
content: "";
display: block;
margin: auto;
}
https://jsfiddle.net/ag3sowbg/ https://jsfiddle.net/ag3sowbg/