Hide (non rimuovere) video HTML5 controlla

Every question on the soggetto spiega come rimuovere i controlli di un elemento video HTML5.Hide (non rimuovere) video HTML5 controlla

videoElement.removeAttribute('controls');

Ma i browser, Firefox e Chrome, hanno un modo di appena nasconde i controlli che li fa scomparire quando il cursore non si muove e il video è in riproduzione. E li fa apparire di nuovo se muovi il cursore o quando il video smette di giocare.

<video controls><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>

^{video file di test: http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4}

Se si riproduce il video qui sopra, e lasciarlo da solo senza spostare il cursore, i controlli saranno scomparirà. Se si sposta nuovamente il cursore, verranno visualizzati di nuovo. Verranno visualizzati anche in pausa o video di finitura.

Molto simile ai comuni lettori video nativi o desktop.

Questo è quello che voglio. Voglio nascondere i controlli allo stesso modo in cui si nasconderebbero automaticamente se il video stava giocando e il cursore non si è spostato per un po '.

C'è un modo per ottenere ciò senza rimuovere completamente i controlli?

fonte

2015-02-19 laggingreflex

Vuoi dire che hai il tuo set di controlli che vuoi agire in questo modo? Difficilmente si può provare a farlo con il set di controlli predefinito del browser poiché agiscono già in questo modo, come hai detto. –

No, voglio solo nascondere i controlli predefiniti. Sto provando esattamente a farlo nel modo in cui il controllo predefinito del browser si nasconde per inattività.Un po 'come in un modo forzato, ma dopo averlo nascosto voglio che il browser riprenda il controllo e poi mostrarlo quando lo riterrà necessario, come se l'utente avesse spostato il cursore di nuovo o il video si fosse fermato. Voglio solo nascondere inizialmente i controlli. Non voglio rimuoverli inizialmente basta nasconderli. Perché rimuoverli rende impossibile giocare con la barra dello spazio, o spostare la linea del tempo, ecc. – laggingreflex

Controlla la mia risposta –

-1

non è necessario javascript. usa CSS. Display: nessuno sui controlli.

fonte

2015-02-19 08:42:53

Metti un div sul video e nascondi/mostra che hai risposto alla tua stessa domanda;

Desidero nascondere i controlli nello stesso modo in cui si nasconderebbero automaticamente se il video era in riproduzione e il cursore non si è spostato per un po '.

Dai un'occhiata anche a questo;

Styling HTML5 Video Controls

fonte

2015-02-19 08:48:37

Prova questo:

$("#myvideo").hover(function() { 
 
    $(this).prop("controls", true); 
 
}, function() { 
 
    $(this).prop("controls", false); 
 

 
}); 
 

 
// if always hide 
 

 
$("#myvideo2").click(function() { 
 
if(this.paused) 
 
    this.play(); 
 
    else 
 
    this.pause(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<video id="myvideo" width="200" > 
 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"> 
 
</video> 
 
<br/>All time hide controls:<br/> 
 
<video id="myvideo2" autoplay width="200" > 
 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"> 
 
</video>

fonte

2015-02-19 09:06:28

aggiungere un evento drag per determinare la ricerca avanti e indietro sarebbe bello pure – Sarfaraaz

che sto usando videojs.com biblioteca e la soluzione era quella di aggiungere

.vjs-control-bar { 
    display:none !important; 
}

al foglio di stile.

fonte

2017-04-01 21:41:38 maaw

Hide (non rimuovere) video HTML5 controlla

risposta

Problemi correlati