Video steuert nur wenn Video abgespielt wird (html5)

Question

Ich benutze das Videoelement, um ein Video auf meiner Website zu zeigen. Ich habe das Poster-Attribut verwendet, um ein Bild mit einem Text und einer Wiedergabetaste darauf anzuzeigen. Mit Javascript habe ich definiert, dass wenn Sie auf das Videoelement/Poster klicken, das Video startet. Nun möchte ich die Steuerelemente des Videos (Wiedergabe/Pause-Taste, Ton, Vollbild) nur angezeigt, wenn das Video abgespielt wird, so dass Sie das Video pausieren oder die Lautstärke einstellen können. Ich habe das Steuerattribut hinzugefügt, aber jetzt werden auch die Steuerelemente angezeigt, wenn das Video nicht abgespielt wird.

<video id="video" class="width-100 display-none borderRadius-l breakPointM-display-inline video" poster="splashvideo.png" preload="auto" controls width="300" height="150"> 
<source src="video.mp4" type="video/mp4" /> 
</video> 

Kann ich das mit etwas Javascript oder CSS beheben?

Answer 1

Ich weiß, dass dies eine ganze Weile zurück gefragt wurde, aber ich wollte sehen, ob jemand eine nette Lösung für dieses hatte, die leer ausgegangen ist, also dachte ich teile meine.

Um Ihre Frage zu beantworten; Ja, Sie können das mit Javascript oder CSS beheben.

Die Lösung, die ich gefunden habe, war, Javascript zu verwenden, um das Steuerattribut beim Klicken auf das Video hinzuzufügen. Genauso wie Sie ein Click-Ereignis verwenden, das das Abspielen und Pausieren mit JS behandelt, fügen Sie einfach das Attribut "controls" hinzu oder entfernen es gleichzeitig.

https://developer.mozilla.org/en/docs/Web/API/Element/setAttribute el.setAttribute('controls','');

https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute el.removeAttribute('controls');

Testing

• Chrome (56): Works, verblassen Kontrollen und verblassen sehr schnell heraus, zeigen wieder, wenn die Maus weiter Video
• Firefox (52): Works, Kontrollen nicht zeigen, bis die Maus auf Video
• Safari (10) bewegt wird: Works, Kontrollen, bis die Maus bewegt mich außerhalb des Videos sichtbar bleiben
• Ränder: nicht getestet :(

Answer 2

Ja, die vollständige Lösung sieht wie folgt aus:

HTML: Video abgespielt wird, wenn Plakat geklickt wird mit Onclick = "dieses Spiel".

<video id="video1" class="width-100 display-none borderRadius-l breakPointM-display-inline video" 
poster="https://placehold.it/350x150" preload="auto" width="300" height="150" onclick="this.play()"> 
<source src="video.mp4" type="video/mp4" /> 
</video> 

JS Code: Ereignis-Listener hinzufügen für die Wiedergabe und Pause, entfernt die folgenden Kontrollen, wenn pausierte, Kontrollen bringt wieder während des Spielens.

var video1 = document.getElementById('video1'); 

function videoPausePlayHandler(e) { 
    if (e.type == 'playing') { 
    //add controls 
    video1.setAttribute("controls","controls"); 
    } else if (e.type == 'pause') { 
    //remove controls 
    video1.removeAttribute("controls"); 
    } 
} 

//Add event listeners 
video1.addEventListener('playing', videoPausePlayHandler, false); 
video1.addEventListener('pause', videoPausePlayHandler, false); 

Sie können es sehen, hier zu arbeiten: https://jsfiddle.net/pypgjt4r/