Estrai parte del video con il video html5. problemi Fullscreen su iphone/ipad

Question

Quello che voglio realizzare:

Ho un progetto in cui spero di realizzare quello che ha fatto in vite loro app. Il mio progetto sarà un normale sito web.

Ecco uno screenshot di quello che generalmente voglio:

dovrebbe essere possibile per un utente di registrare un video, prendere parti di esso e caricarlo al mio sito. Anche l'audio dovrebbe far parte del video.

Finora ive ha creato un dispositivo di scorrimento che scorre l'area selezionata. Il codice attuale \ prototipo può essere visto qui: http://smn-vlp.azurewebsites.net/ Attenzione: c'è suono.

In questo momento è fatto solo con javascript e l'elemento dom video.

Problema: Iphone utilizza il video a schermo intero, indipendentemente da ciò che faccio con la parte selezionata. Su altri dispositivi sembra funzionare alla grande.

Possibile soluzione: Ho provato ad utilizzare tela per riprodurre il video, ma al fine di ottenere effettivamente le immagini sulla tela, il video originale deve .play(). Ciò attiva la modalità a schermo intero dal safari una volta di nuovo. Ho quindi pensato di impostare currentTime = + 1 e ottenere frame su una tela senza effettivamente riprodurre il video. Ma, posso salvare le immagini disegnate in una matrice per generare in un video dopo?

Cosa faccio del suono se generi video da immagini su tela? funziona?

function CaptureAudio() { 
    var audioContext = new webkitAudioContext(); 
    var gainNode = audioContext.createGain(); 
    gainNode.gain.value = 1;     // Change Gain Value to test 
    filter = audioContext.createBiquadFilter(); 
    filter.type = 2;       // Change Filter type to test 
    filter.frequency.value = 5040;   // Change frequency to test 

    var source = audioContext.createMediaElementSource(video); 
    source.connect(gainNode); 
    gainNode.connect(filter); 
    filter.connect(audioContext.destination); 
    console.log(source); 
} 

Se è così, il pensiero im devo tenere traccia della parte selezionata del video, e ottenere l'audio per quella parte, prima di generare il video. Il video può essere generato da immagini e audio insieme?

Ora, prima di provare tutto questo mi piacerebbe sapere da chiunque abbia fatto qualcosa di simile, quindi non seguire un percorso pazzo che non può essere completato. Questo progetto ha alcuni limiti di budget al momento.

Riassunto delle domande:

1. Devo usare tela per generare una parte selezionata del video?
2. Posso aggiungere audio al video generato, dal video originale?
3. È questa la strada da percorrere?
4. In realtà è possibile generare il video su iPhone senza andare a fullscren?
5. Mi piacerebbe ricevere altri suggerimenti generali su come ottenerlo.

Answer 1

Secondo this post, voi non hanno alcuna soluzione per la vostra applicazione di lavorare direttamente "come un sito web". Gli utenti devono salvarlo nella loro dashboard, oppure devi fare un'app per iOS con una webview ...

Cheers.

Answer 2

Hai un sacco di domande che dovrebbero essere separati, non solo qui, ma io ti risponderò un paio:

Giocare il video in linea su iPhone

L'iPhone e iPod costringono la riproduzione di video a schermo intero in Safari (e nelle app che utilizzano la WebView non modificata) ma è possibile aggirare questo problema simulando la riproduzione tramite scremando il anziché effettivamente lo .play().

ho scritto un modulo che si prende cura di la riproduzione del video in linea e sincronizzazione con l'audio (ma funziona anche su video senza una colonna sonora): iphone-inline-video

Con il modulo suggerito, è possibile:

// videoElement is the <video> element 
makeVideoPlayableInline(videoElement); 

// iOS needs user interaction to load/play a video, 
// so you'll need a start button or similar 
// You only need to load the video, so .play and then .pause it 
startButton.ontouchstart = function() { 
    videoElement.play(); 
    setTimeout(function() { videoElement.pause() }, 10); 
} 

cornici Estrazione

volta che il video è stato caricato, si può solo fare

// skim to 4.3 seconds 
video.currentTime = 4.3; 

// extract the frame to your canvas 
canvas.drawImage(video, 0, 0, video.videoWidth, video.videoHeight); 

Ora la tua tela avrà la cornice estratta. Salvare l'immagine dall'area di disegno con qualcosa come array.push(ctx.getImageData()) (attenzione, questa operazione richiede molto la memoria, se si salvano molti fotogrammi si può bloccare il browser)