HTML5動画再生ボタン開始時に非表示

Question

再生ボタンが最初に表示されるHTML5動画プレーヤーのバグがあります。再生ボタンではなくリプレイを表示したい。再生ボタンが正常に機能しているように見えますが、開始時に隠れることはありません。あなたはJavaScriptを起動したとき

CSS

.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 { 
    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 150ms; 
} 

.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; 
} 

HTML

<div class="video-wrapper"> 
    <video id="bVideo"> 
     <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()"></div> 
    </div> 

スクリプト

var bunnyVideo = document.getElementById("bVideo"); 
var el = document.getElementById("playButton"); 
var replay = document.getElementById("replayButton"); 
function playPause() { 
    if (bunnyVideo.paused) 
    { 
    bunnyVideo.play(); 
    el.className = ""; 
    replay.className = ""; 
    } 
    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"; 
    el.className = ""; 
    bunnyVideo.setAttribute("controls","controls"); 
} 

function showControls(){ 
    bunnyVideo.setAttribute("controls","controls"); 
} 
function hideControls(){ 
    bunnyVideo.removeAttribute("controls","controls"); 
} 
bunnyVideo.addEventListener("click", playPause, false); 
bunnyVideo.addEventListener("play", playPauseControls, false); 
bunnyVideo.addEventListener("pause", playPauseControls, false); 
bunnyVideo.addEventListener("mouseover", showControls, false); 
bunnyVideo.addEventListener("mouseout", hideControls, false); 
playButton.addEventListener("mouseover", showControls, false); 
replay.addEventListener("mouseover", showControls, false); 
bunnyVideo.addEventListener("ended", videoEnd, false); 

https://jsfiddle.net/prpzv8wh/

Answer 1

は不可視にdiv要素を設定します。

var replay = document.getElementById("replayButton"); 
replay.style.visibility = "hidden"; 

その後リプレイコールに戻って目に見えるに設定は：

function videoEnd() { 
    replay.className = "replayButton"; 
    replay.style.visibility = "visible"; 
    el.className = ""; 
    bunnyVideo.setAttribute("controls","controls"); 
}