Logré obtener un video de php usando este código:
var some_video_element = document.querySelector('video') var req = new XMLHttpRequest(); req.onload = function () { var blob_uri = URL.createObjectURL(this.response); some_video_element.src = blob_uri; some_video_element.addEventListener('oncanplaythrough', (e) => { URL.revokeObjectURL(blob_uri); }); }; req.open("get", "vid.php", true); req.overrideMimeType('blob'); req.send(null);Sin embargo, la carga es larga, por lo que quiero mostrar los datos tan pronto como los reciba. Desde Mozilia , se indica que podemos usar simple o "" como mimo para obtener el texto en progreso. Sin embargo, no puedo lograr convertir texto sin formato a video/mp4 usando un blob. Actualmente este es el código que no funciona. Intento obtener el video cuando alguna parte está disponible mientras el resto aún se está descargando.
var some_video_element = document.querySelector('video') var req = new XMLHttpRequest(); req.onprogress = function () { var text = b64toBlob(Base64.encode(this.response), "video/mp4"); var blob_uri = URL.createObjectURL(text); some_video_element.src = blob_uri; some_video_element.addEventListener('oncanplaythrough', (e) => { URL.revokeObjectURL(blob_uri); }); }; req.onload = function () { var text = b64toBlob(this.response, "video/mp4"); var blob_uri = URL.createObjectURL(text); some_video_element.src = blob_uri; some_video_element.addEventListener('oncanplaythrough', (e) => { URL.revokeObjectURL(blob_uri); }); }; req.open("get", "vid.php", true); req.overrideMimeType('text\/plain'); req.send(null);Gracias. NB: este JavaScript está buscando este código php: https://codesamplez.com/programming/php-html5-video-streaming-tutorial Pero los datos de eco han sido cambiados por echo base64_encode (datos);
Como se indica en los comentarios, le faltan algunos componentes decentes.
Puede implementar lo que está solicitando, pero necesita hacer algunos cambios. Siguiendo la API de transmisión de HTML5 , puede crear una transmisión que hará que el video use segmentos que obtenga del servidor.
Algo a tener en cuenta es que el protocolo HLS o DASH que ya existe puede ayudar, mirar el protocolo HLS puede ayudar, ya que es fácil de usar con la idea de segmentos que pueden comunicarse con su servidor y simplemente decodificar su fuente base64.
Si usa la API Fetch en lugar de XMLHttpRequest , puede consumir la respuesta como unReadableStream que se puede alimentar a un SourceBuffer . Esto permitirá que el video se pueda reproducir tan pronto como comience a cargarse en lugar de esperar a que se descargue el archivo completo. Esto no requiere ningún formato de contenedor de video especial, procesamiento de back-end o bibliotecas de terceros.
const vid = document.getElementById('vid'); const format = 'video/webm; codecs="vp8,vorbis"'; const mediaSource = new MediaSource(); let sourceBuffer = null; mediaSource.addEventListener('sourceopen', event => { sourceBuffer = mediaSource.addSourceBuffer(format); fetch('https://bes.works/dev/samples/test.webm') .then(response => process(response.body.getReader())) .catch(err => console.error(err)); }); vid.src = URL.createObjectURL(mediaSource); function process(stream) { return new Response( new ReadableStream({ start(controller) { async function read() { let { done, value } = await stream.read(); if (done) { controller.close(); return; } sourceBuffer.appendBuffer(value); sourceBuffer.addEventListener( 'updateend', event => read(), { once: true } ); } read(); } }) ); } video { width: 300px; } <video id="vid" controls></video>