Attivare la didascalia chiusa nei video HTML5 e disabilitare i controlli video predefiniti

Question

Ho due problemi. Non appena inserisco il tag track all'interno del mio elemento video, viene visualizzato il controller predefinito del video. Ho controlli personalizzati quindi è abbastanza il problema.

Secondo. Non riesco a trovare un modo per attivare i sottotitoli disattivati.

HTML:

JS:

var cc = document.getElementById('cc'); 
function cc(){ 
     var video= document.getElementById('media'); 
     var track1 = video.textTracks[0]; 
     var mytrack = document.getElementById('mytrack'); 
     var track2 = mytrack.track; 
     console.log(track1); 
     console.log(track2); 
    } 
    cc.addEventListener('click',cc,false); 

Answer 1

se si rimuove ogni riferimento alla controls nel tag <video> che dovrebbe mantenere i controlli nascosti (possono lampeggiare sul primo carico, ma una volta che il il video è caricato rimarranno nascosti) l'elemento controls è booleano: se esiste, mostrerà, se non lo fa, non lo farà.

Per mostrare e nascondere le didascalie è necessario impostare il mode a "mostrare" o "nascosto", come di seguito

<video autoplay loop id="v"> 
    <source src="Video.mp4" type="video/mp4"> 
    <track id="enTrack" src="entrack.vtt" label="English" kind="subtitles" srclang="en" default> 
    HTML5 video not supported 
</video> 
. 
. 
. 
<script> 
. 
v = document.getElementById("v") 
v.textTracks[0].mode = "hidden"; // "showing" will make them reappear 
    // if you want to show the controls 
v.controls = true; 
. 
</script> 

Essere consapevoli che YMMV come i vari browser hanno un comportamento diverso quando si tratta di didascalie. Funziona su Chrome/Safari su OSX e IE10 (sebbene su Safari e IE il valore della modalità sia "0" per nascosto e "2" per la visualizzazione, ma l'utilizzo del testo per impostarli sembra funzionare. Non sono stati testati su iOS