Este código funciona bien en mac Agregue onload:main() a la etiqueta del cuerpo Puede ejecutarse automáticamente después del inicio En el navegador ios no puede ejecutarse automáticamente, después de configurar un botón, haga clic para apuntar a main(). Hacer clic para jugar normalmente en ios onload no se puede ejecutar
Tanto Mac como iOS usan el navegador Safari. Cómo hacer que la reproducción automática de iOS sea normal
function main() { const video1= initializeVideo("mv/m4.mp4"); VIDEO_CANVAS = document.getElementById('video'); video1.addEventListener('loadeddata', (event) => { const context = VIDEO_CANVAS.getContext("2d"); context.canvas.width = video1.videoWidth * (740 / video1.videoHeight); context.canvas.height = 740; processVideos(video1,0); }); } function processVideos(video1,frame1){ if(frame1 <=200 ) { showVideoFrame(video1,frame1); frame1++; } if(frame1>=200) { location.reload(); } setTimeout(function(){ processVideos(video1,frame1); },30); } function showVideoFrame(video,frame){ var time = frame / 30 ; video.currentTime=time; const context=VIDEO_CANVAS.getContext("2d"); context.drawImage(video, 0, 0, VIDEO_CANVAS.width,VIDEO_CANVAS.height); } function initializeVideo(filename) { var video = document.createElement('video'); video.src=filename; video.load(); return video; }contenido del cuerpo
<body onload="main()"> <center> <canvas id="video"></canvas> </center> </body>¿La idea es poner el video a cámara lenta? No es fácil saltar de un cuadro a otro, porque no sabe cuánto del video se ha cargado. En este ejemplo, uso la propiedad defaultPlaybackRate en el video para controlar la velocidad. Y luego simplemente reproduzca el video y dibuje el cuadro actual en el lienzo cada 30 ms. El intervalo se borra cuando el video ha terminado.
Si esto se va a reproducir automáticamente, puede intentar silenciar el video antes de reproducirlo. Una alternativa podría ser dejar que el usuario interactúe primero con la página, ya sea haciendo clic en algo (evento de clic) o desplazándose (evento de desplazamiento) un poco. Puede leer más al respecto aquí: Guía de reproducción automática para medios y API de audio web - Tecnologías de medios web | MDN
var VIDEO_CANVAS, interval; document.addEventListener('DOMContentLoaded', e => { VIDEO_CANVAS = document.getElementById('video'); const video = document.createElement('video'); video.defaultPlaybackRate = .4; video.muted = true; // important for autoplay video.addEventListener('canplaythrough', e => { VIDEO_CANVAS.width = e.target.videoWidth * (200 / e.target.videoHeight); VIDEO_CANVAS.height = 200; e.target.play(); interval = setInterval(function() {showVideoFrame(video);}, 30); }); video.addEventListener('ended', e => { clearInterval(interval); }); video.src = "https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4"; }); function showVideoFrame(video) { const context = VIDEO_CANVAS.getContext("2d"); context.drawImage(video, 0, 0, VIDEO_CANVAS.width, VIDEO_CANVAS.height); } <canvas id="video"></canvas>