Sprite video a schermo intero

Question

Sto provando a creare un piccolo progetto con sprite video, modellato dopo this JSFiddle for audio sprites.

La riproduzione funziona come previsto: facendo clic sui pulsanti corrispondenti vengono riprodotte le parti pertinenti del video.

Ora, tuttavia, vorrei incorporare qualcosa che faccia riprodurre il video a schermo intero (oa finestra intera) quando si preme il pulsante o quando si preme un tasto. La demo here, for example mostra un approccio in cui se si fa clic su Immettere mentre il video è in riproduzione, entrerà in modalità a schermo intero.

Non sono particolarmente esperto con JavaScript, quindi è probabile che la soluzione mi stia guardando in faccia su come integrare l'approccio mostrato nell'articolo su Mozilla, ma sono perplesso.

Ecco quello che ho in questo momento, che crea gli sprite di video, come previsto:

var videoSprite = document.getElementById('bbb'); 
 

 
// sprite data 
 
var spriteData = { 
 
    full: { 
 
    start: 0, 
 
    length: 595 
 
    }, 
 
    tentotwenty: { 
 
    start: 10, 
 
    length: 10 
 
    }, 
 
    tentothirty: { 
 
    start: 10, 
 
    length: 20 
 
    }, 
 
    fiftytoonefifty: { 
 
    start: 50, 
 
    length: 200 
 
    } 
 
}; 
 

 
// current sprite being played 
 
var currentSprite = {}; 
 

 
// time update handler to ensure we stop when a sprite is complete 
 
var onTimeUpdate = function() { 
 
    if (this.currentTime >= currentSprite.start + currentSprite.length) { 
 
    this.pause(); 
 
    } 
 
}; 
 
videoSprite.addEventListener('timeupdate', onTimeUpdate, false); 
 

 
// in mobile Safari, the first time this is called will load the audio. Ideally, we'd load the audio file completely before doing this. 
 
var playSprite = function(id) { 
 
    if (spriteData[id] && spriteData[id].length) { 
 
    currentSprite = spriteData[id]; 
 
    videoSprite.currentTime = currentSprite.start; 
 
    videoSprite.play(); 
 
    } 
 
};

<video id="bbb"> 
 
    <source src="https://ia700408.us.archive.org/26/items/BigBuckBunny_328/BigBuckBunny_512kb.mp4" type="video/mp4" /> 
 
</video> 
 
<br /> 
 
<br /> 
 
<ul> 
 
    <li> 
 
    <button onclick="playSprite('full');">Play full video</button> 
 
    </li> 
 
    <li> 
 
    <button onclick="playSprite('tentotwenty');">Play from 10 to 20 seconds</button> 
 
    </li> 
 
    <li> 
 
    <button onclick="playSprite('tentothirty');">Play from 10 to thirty seconds</button> 
 
    </li> 
 
    <li> 
 
    <button onclick="playSprite('fiftytoonefifty');">Play from 50 to 200 seconds</button> 
 
    </li> 
 
</ul>

Eventuali suggerimenti su come estendere questo per lo schermo intero o finestra piena sarebbe molto apprezzato!

Answer 1

Io uso il codice che esiste in MDN e lo modifico per avere lo schermo intero a tendina significa che quando si preme invio il video può essere a schermo intero se non lo è e viceversa.

document.addEventListener("keydown", function(e) { 
    if (e.keyCode == 13) { 
    toggleFullScreen(); 
    } 
}, false); 

function toggleFullScreen() { 
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;  
    if (!state) { 
    if (document.documentElement.requestFullscreen) { 
     document.documentElement.requestFullscreen(); 
    } else if (document.documentElement.msRequestFullscreen) { 
     document.documentElement.msRequestFullscreen(); 
    } else if (document.documentElement.mozRequestFullScreen) { 
     document.documentElement.mozRequestFullScreen(); 
    } else if (document.documentElement.webkitRequestFullscreen) { 
     document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); 
    } 
    } else { 
    if (document.exitFullscreen) { 
     document.exitFullscreen(); 
    } else if (document.msExitFullscreen) { 
     document.msExitFullscreen(); 
    } else if (document.mozCancelFullScreen) { 
     document.mozCancelFullScreen(); 
    } else if (document.webkitExitFullscreen) { 
     document.webkitExitFullscreen(); 
    } 
    } 
} 

Hai solo bisogno di chiamare toggleFullScreen() funzione quando i pulsanti viene cliccato.

Quando si preme Invio, il video viene riavviato. Perché??

Quando si fa clic sui pulsanti (ci si concentra su quel tasto), il video fa a schermo intero e quando si preme inserire nuovamente l'uscita video dalla modalità a schermo intero e quindi l'elemento focalizzato (il pulsante che è stato già fatto clic su) fare nuovamente clic in modo da riavviare il video.

Ora capisco cosa sta succedendo. Qual'è la soluzione?

È sufficiente chiamare la funzione blur() per rimuovere lo stato attivo dall'elemento.

HTML

<button onclick="playSprite(this,'full');">Play full video</button> 
<button onclick="playSprite(this,'tentotwenty');">Play from 10 to 20 seconds</button> 
<button onclick="playSprite(this,'tentothirty');">Play from 10 to thirty seconds</button> 
<button onclick="playSprite(this,'fiftytoonefifty');">Play from 50 to 200 seconds</button> 

Javascript

function(currentElement,id) { 
    currentElement.blur(); 
    //your code 
} 

Qual è this?

Ogni volta, quando playSprite funzione viene chiamata (playSprite(this, YourdesireTime)), l'elemento cliccato corrente passa a funzionare per capire quale pulsante viene selezionato e rimuovere l'attivo dall'elemento cliccato.

Che differenza c'è tra la risposta e la risposta di @ cviejo?

La mia risposta

1. funzionalità
2. ha commutando non ripristinare il video
3. non ottimizza (credo che non ti piace per modificare il codice)

@ cviejo's risposta

1. ottimizzare il codice

Nota: Non voglio dire @ risposta di cviejo non è buono perché in realtà a ridurre al minimo il proprio codice.

Conclusione

È possibile combinare il mio codice e il codice di @ cviejo per ottenere un risultato migliore.

Codepen