Mostra sempre i controlli video

Question

C'è un modo per mostrare sempre i controlli video nel tag video HTML5 invece di mostrarli su MouseOver?

Codice Video:

<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

Aggiornamento novembre 2017: Si prega di notare a causa di nuovi cambiamenti nella Safari 11, questo non è più lavorando in quel browser. Aggiornerò la posta se trovo un modo.

Anche se i controlli nascosti fanno parte delle specifiche video HTML5. Ci sono due modi per realizzare questo tramite javascript e l'altro tramite css.

In Javascript è possibile aggiungere un gestore di eventi per l'evento timeupdate che cambia ogni volta che la posizione di riproduzione è cambiata, in altre parole l'evento si verifica sempre mentre il video è in riproduzione.

Assumendo l'ID per l'elemento video si chiama 'player', codice javascript sarebbe simile a questa:

JS: campione

//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); 

di lavoro di quanto sopra è qui: https://jsfiddle.net/l33tstealth/t082bjnf/6/

Il secondo modo per farlo è attraverso i CSS, ma funzionerà solo con browser basati su webkit, quindi limitati. Puoi forzare la barra dei comandi a mostrare sempre.

Il CSS per che sarebbe simile a questa:

CSS:

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

campione (funziona solo nei browser basati su Web Kit) di lavoro: https://jsfiddle.net/l33tstealth/t082bjnf/7/