Estaba haciendo algunos experimentos sobre esto y descubrí que el video comenzará a funcionar cuando hagamos una pausa y reproduzcamos.

 const rVideo = document.getElementById("videoElement"); if (rVideo) { rVideo.pause(); rVideo .play() .then((res) => { console.log("playing start", res); }) .catch((err) => { console.log("error playing", err); }); }

No es una solución perfecta, sino una solución alternativa para que funcione.

Puede arreglar la pantalla negra usando setTimeout de la siguiente manera:

 this.video.pause(); setTimeout(() => { this.video.play().then((res) => { console.log("playing start", res); }) .catch((err) => { console.log("error playing", err); }); }, 0);

Simplemente envuelva la etiqueta de video en div . Supongo que colocó su etiqueta de video en absolute o fixed . Parece que hay un error con eso. Posicionar el contenedor div fixed / absolute en lugar del elemento de video parece ayudar. También podría ayudar darle al elemento de video un background-color .

Para que se sirvan correctamente en los dispositivos iOS, los videos deben poder solicitarse, aunque sea parcialmente, según lo especificado por Apple. Por lo tanto, el 'soporte de rango de bytes' debe estar habilitado en el servidor en el que están alojados: https://discusiones.apple.com/thread/4119538?page=2

Debido a la cantidad de quejas que ha habido de que los iPhones no pueden reproducir algunos podcasts, Apple ahora requiere que el servidor en el que aloja sus archivos multimedia tenga habilitado el 'soporte de rango de bytes'; básicamente, esto significa hacer frente a las solicitudes de solo una parte de un archivo a la vez, lo cual es necesario para el iPhone. Debe confirmar con su servicio de alojamiento que admitan esto: si no lo hacen (o no saben qué es), debe buscar otro servicio de alojamiento.

Además, si está utilizando Cloudflare como un servicio CDN y la compresión gzip está habilitada en el servidor, Cloudflare no reenvía el encabezado 'Accept-Ranges' y los videos no se muestran correctamente: https://community.cloudflare.com/t /aceptar-intervalos-y-longitud-del-contenido-encabezados-no-reenviados-por-cloudflare/41445/4

Por lo tanto hay dos soluciones:

1. Deshabilite completamente la compresión gzip en el servidor.
2. Habilite la compresión gzip en el servidor y agregue SetEnvIfNoCase Request_URI \.mp4$ no-gzip dont-vary## Heading ## al archivo .htaccess para no comprimir archivos .mp4. La solución es aplicable para cualquier formato de video.