Zawsze wyświetlaj formanty wideo

Question

Czy istnieje sposób, aby zawsze wyświetlać elementy sterujące wideo w tagu wideo HTML5 zamiast pokazywać je tylko w usłudze MouseOver?

kod wideo:

<table cellpadding="0" cellspacing="0"> 
    <tr> 
    <td runat="server" width="680px" height="383px" id="vContainer"> 
     <div style="z-index: 1;" runat="server" id="cont"> 
     <div runat="server" style="background: rgba(200, 200, 200, 0.6) url('/images/Play.png') no-repeat center center;" id="img"> 
     </div> 
     <video id="player" style="z-index: 1; border: 1px solid #000000;" width="100%" height="100% " 
      title="" controls runat="server"> 
      <source runat="server" id="ffVideo" type="video/ogg" /> 
      <source runat="server" id="mp4Video" type="video/mp4" /> 
     </video> 
     <embed id="playerOld" width="680px" height="383px" autostart="false" allowfullscreen="true" 
      title="" style="display: none" type="application/mp4" runat="server" /> 
     </div> 
    </td> 
    </tr> 
</table 

>

Answer 1

Aktualizacja listopad 2017: Uwaga: ze względu na nowe zmiany w Safari 11, to już nie pracuje w tej przeglądarce. Zaktualizuję post, jeśli znajdę sposób.

Chociaż ukrywanie elementów sterujących jest częścią specyfikacji wideo HTML5. Istnieją dwa sposoby na wykonanie tego poprzez javascript i inne za pośrednictwem css.

W języku Javascript można dodać obsługę zdarzeń dla zdarzenia timeupdate, które zmienia się za każdym razem, gdy zmieni się pozycja odtwarzania, innymi słowy, zdarzenie zawsze występuje podczas odtwarzania wideo.

Zakładając identyfikator dla elementu wideo nazywa się 'gracz', kod JavaScript będzie wyglądać następująco:

JS: próbka

//assign video element to variable vid 
var vid = document.getElementById("player"); 

function videoTimeUpdate(e) 
{ 
    //set controls settings to controls,this make controls show everytime this event is triggered 
    vid.setAttribute("controls","controls"); 
} 

//add event listener to video for timeupdate event 
vid.addEventListener('timeupdate', videoTimeUpdate, false); 

Praca powyższego jest tutaj: https://jsfiddle.net/l33tstealth/t082bjnf/6/

Drugi sposób to zrobić za pomocą CSS, ale to działa tylko dla przeglądarek opartych na webkitach, a więc ograniczone. Możesz wymusić, aby pasek sterowania zawsze się wyświetlał.

CSS za które wyglądać tak:

CSS:

video::-webkit-media-controls-panel { 
    display: flex !important; 
    opacity: 1 !important; 
} 

próbkę (działa tylko w przeglądarkach opartych zestawu web) Praca: https://jsfiddle.net/l33tstealth/t082bjnf/7/