video in linea html5 su iphone

Voglio riprodurre un video HTML5 su iPhone ma ogni volta che provo a farlo, l'iPhone si apre automaticamente a schermo intero quando viene chiamato il video '.play()'. Come faccio a giocare il video in linea, senza l'iPhone cambiare l'interfaccia utente di esso come questi:video in linea html5 su iphone

http://www.easy-bits.com/iphone-inline-video-autostart

http://www.takeyourdose.com/en (Quando si fa clic su "Inizia la 360 esperienza")

Edit: Ecco il mio codice:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>iPhone Test</title> 
     <meta charset="utf-8"> 
    </head> 
    <body> 
     <button onclick="document.getElementById('vid').play()">Start</button> 

     <video id="vid"> 
      <source src="/videos/tutorial.mp4" type="video/mp4"> 
      Your browser does not support the video tag. 
     </video> 
    </body> 
</html>

fonte

2015-06-15 Chris Johnson

Si prega di pubblicare l'implementazione del work in progress. – JAL

abbiamo bisogno di un po 'di codice –

Ci scusiamo per aver scritto questo come risposta invece di un commento sul thread principale, ma apparentemente non ho abbastanza punti reputazione da commentare!

In ogni caso, sto anche cercando di fare esattamente la stessa cosa dell'OP.

Ho notato che esiste una particolare libreria, krpano, abbinata allo krpano videoplayer plugin che consente di riprodurre il video su iPhone INLINE! Alcuni demo di questo in azione possono essere trovati qui: http://krpano.com/video/

Mentre preferirei un semplice esempio di video 2D su questi video panoramici pazzi, questo è il più vicino che ho trovato mentre perlustravo il web. Da quello che posso dire, che utilizzano un elemento normale, non attaccato al documento:

var v = document.querySelector('video'); 

// remove from document 
v.parentNode.removeChild(v); 

// touch anywhere to play 
document.ontouchstart = function() { 
    v.play(); 
}

elemento video prima che venga rimosso:

<video playsinline webkit-playsinline preload="auto" crossorigin="anonymous" src="http://www.mediactiv.com/video/Milano.mp4" loop style="transform: translateZ(0px);"></video>

Ma questo da solo non sembra essere sufficiente: quando la il video viene riprodotto, rimane comunque a schermo intero.

Come fanno a impedire che il video venga visualizzato a schermo intero?

EDIT: Dopo aver guardato entrambi gli esempi Sembrava che entrambi sono stati sfruttando l'elemento canvas per il rendering del video, quindi sono andato avanti e montata su una demo mostra rendering video attraverso l'elemento canvas. Mentre la demo funziona alla grande, non riesce a fornire su iPhone (anche se l'elemento video è completamente rimosso dal DOM!) - il video salta ancora a schermo intero. Sto pensando al passo successivo sarebbe quello di applicare questi stessi principi per una tela WebGL (che è quello che gli esempi krpano stanno facendo), ma nel frattempo forse questa demo sarà scintilla alcune idee in altri ...

http://jakesiemer.com/projects/video/index.htm

fonte

2015-06-15 23:54:51 Jake

Chris J, penso anche che il primo esempio funziona perché quel particolare libreria in realtà decodifica il flusso video in tempo reale tramite JavaScript (invece di sfruttare il browser/OS del decoder integrato). Questo è simile a [Broadway.js] (https://github.com/mbebenita/broadway), che funziona anche casualmente su iPhone, anche se il framerate sembra davvero stravagante e l'audio sembra non sincronizzarsi particolarmente bene. Esempio qui: http://mbebenita.github.io/Broadway/foxDemo.html – Jake

Sto lavorando a una soluzione fino a quando Apple non consentirà al "web-player-playinline" di giocare effettivamente in linea.

ho iniziato una libreria qui: https://github.com/newshorts/InlineVideo

E 'molto agitato, ma la sostanza di base è che "cercare" attraverso il video invece di giocare a titolo definitivo.Così, invece di chiamare:

video.play()

È invece impostare un ciclo utilizzando trama di domanda animazione o setInterval, quindi impostare il:

video.currentTime = __FRAME_RATE__

Quindi il tutto potrebbe apparire come nel tuo html:

<video controls width="300"> 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4"> 
</video> 
<canvas></canvas> 
<button>Play</button>

ei tuoi js (assicurarsi di includere jQuery)

var video = $('video')[0]; 
var canvas = $('canvas')[0]; 
var ctx = canvas.getContext('2d'); 
var lastTime = Date.now(); 
var animationFrame; 
var framesPerSecond = 25; 
function loop() { 
    var time = Date.now(); 
    var elapsed = (time - lastTime)/1000; 

    // render 
    if(elapsed >= ((1000/framesPerSecond)/1000)) { 
     video.currentTime = video.currentTime + elapsed; 
     $(canvas).width(video.videoWidth); 
     $(canvas).height(video.videoHeight); 
     ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight); 
     lastTime = time; 
    } 

    // if we are at the end of the video stop 
    var currentTime = (Math.round(parseFloat(video.currentTime)*10000)/10000); 
    var duration = (Math.round(parseFloat(video.duration)*10000)/10000); 
    if(currentTime >= duration) { 
     console.log('currentTime: ' + currentTime + ' duration: ' + video.duration); 
     return; 
    } 

    animationFrame = requestAnimationFrame(loop); 
} 

$('button').on('click', function() { 
    video.load(); 
    loop(); 
});

http://codepen.io/newshorts/pen/yNxNKR

Il vero driver di Apple cambiare questo sarà il recente rilascio di WebGL per i dispositivi IOS abilitato di default. Fondamentalmente ci sarà un sacco di persone che cercano di usare trame video. tecnicamente in questo momento, non si può fare.

fonte

2015-07-20 21:05:01 newshorts

Se si crea un elemento audio e un elemento video, è possibile riprodurre l'audio tramite interazione con l'utente e poi cercare il video, rendendolo ad una tela. Si tratta di qualcosa di veloce che mi si avvicinò con (testato su iPhone iOS 9)

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext('2d'); 
var audio = document.createElement('audio'); 
var video = document.createElement('video'); 

function onFrame(){ 
    ctx.drawImage(video,0,0,426,240); 
    video.currentTime = audio.currentTime; 
    requestAnimationFrame(onFrame); 
} 

function playVideo(){ 
    var i = 0; 
    function ready(){ 
     i++; 
     if(i == 2){ 
      audio.play(); 
      onFrame(); 
     } 
    } 
    video.addEventListener('canplaythrough',ready); 
    audio.addEventListener('canplaythrough',ready); 

    audio.src = video.src = "http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_10mb.mp4"; 

    audio.load(); 
    video.load(); 
}

CodePen

Test Page

fonte

2016-03-02 21:44:59 Kyle

Questo non caricherà il file sorgente due volte? – yckart

@yckart, no. Il video viene memorizzato nella cache al primo caricamento. Ho pensato che avrebbe caricato anche due volte. Ho controllato l'ispettore di rete per vedere che in realtà caricava il video solo una volta e la seconda richiesta era stata pubblicata dalla cache. – Kyle

Questo funziona! Se si preferisce una soluzione più completa, provare [iphone-inline-video] (https://github.com/bfred-it/iphone-inline-video) (divulgazione: l'ho scritto). È fondamentalmente lo stesso concetto, ma si occupa anche degli eventi e lo rende senza soluzione di continuità. –

On IOS10/Safari 10 è ora possibile aggiungere la proprietà playsinline all'elemento HTML5 Video e giocherà solo in linea.

fonte

2016-09-12 14:18:32 Eek

E su iOS 8-9 puoi usare [iphone-inline-video] (https://github.com/bfred-it/iphone-inline-video/) come polyfill –

risposta

Problemi correlati