Tengo un video de 1080p que estoy mostrando en una etiqueta HTML5 <video> en mi página.Vídeo HTML5: Detección de ancho de banda
¿Existe un método javascript (ish) simple para detectar el ancho de banda, así que puedo cambiar el video para versiones de menor calidad si la conexión del usuario es demasiado lenta para transmitir el video? Similar a la lógica detrás del selector de tamaño de video "automático" de YouTube.
¡Odio esa función! Por lo general, es incorrecto, y si quiero esperar 2 horas para cargar mi video de dang, ¡entonces esperaré! No hay una manera confiable de medir esto con precisión sin enviar un gran archivo ficticio al usuario y medir el tiempo que le llevó llegar.
Debe contar con la entrada del usuario (¡y recordarla correctamente! ¡También a diferencia de YouTube!).
En resumen, no tome YouTube como un ejemplo.
Pero seguramente si la velocidad de conexión disminuye durante la reproducción, querrá que el video cambie automáticamente al flujo de ancho de banda inferior temporalmente en lugar de interrumpir su reproducción. ¿No? –
@DanHerbert: No, si el interruptor es obstructivo, lo que generalmente es (la calidad de un video se degrada considerablemente, lo que a menudo hace que cualquier búfer anterior se vaya al infierno, lo que significa que no puede rebobinar correctamente). No. Si el usuario quería hacerlo, lo hará él mismo, confía en mí. Simplemente haga que la opción de cambio de calidad sea visible y clara. No todo debe ser automático. –
en Google Chrome, al menos, no son estas propiedades en un elemento de vídeo:
webkitVideoDecodedByteCount: 0
webkitAudioDecodedByteCount: 0
Estos deberían ser suficientes para determinar la rapidez con que el cliente puede descodificar el vídeo. A medida que se reproduzca el video, usted mantendrá un registro de la cantidad delta de estos bytes que le da bytes/s, el cliente está procesando el video.
¿Alguna actualización de este método o de cualquier otro ahora que es 2015? Gracias –
Hay servicios de pago que pueden darle una indicación de en qué ancho de banda está la otra parte, como netspeed.
La precisión de los datos puede ser suficiente para usted, pero no he tenido la oportunidad de probarlo por mi cuenta.
He mirado en netspeed ... Es un indicador pero es muy burdo, solo dice "Cable/DSL", "Dialup", "Móvil", etc. – schieferstapel
Sí, la detección de funciones y el monitoreo de la velocidad de almacenamiento en búfer serían mejor alternativa :) –
Según el reproductor y la plataforma de codificación que esté utilizando, es posible que pueda usar la codificación HLS para sus videos. HLS significa HTTP Live Streaming, un protocolo desarrollado por Apple para resolver principalmente este problema (entre otros).
HLS básicamente divide su archivo de video en varios archivos pequeños para que puedan ser "pseudo" transmitidos mediante un simple servidor web. Con HLS también puede codificar en múltiples resoluciones y un reproductor puede cambiar a un ancho de banda inferior o superior.
El único inconveniente es que la mayoría de los jugadores usan Flash para reproducir contenido codificado HLS. Compruébelo usted mismo en acción aquí: http://www.flashls.org/latest/examples/chromeless/
Aquí es HLS demo de flowplayer: http://demos.flowplayer.org/basics/hls.html
Y aquí es un plugin para VideoJS: https://github.com/videojs/videojs-contrib-hls
para codificar en HLS, puede utilizar ffmpeg gratis y subir archivos a su servidor: https://www.ffmpeg.org/ffmpeg-formats.html#hls-1
o bien, puede utilizar una solución basada en la nube de AWS como Transcoder o Brightcove https://aws.amazon.com/elastictranscoder/
'videojs-contrib-hls':" * Este proyecto resuelve esa situación proporcionando un polyfill para HLS en buscadores que tienen soporte para Media Source Extensions, o en su defecto, admite Flash. Puede implementar una sola secuencia de HLS , código contra las API de video HTML5 habituales y crea una experiencia de video rápida y de alta calidad en todas las categorías de dispositivos web grandes. * "¡Increíble! ¡Justo lo que necesitaba! ¡Muchas gracias! –
Para un cliente HLS que es independiente del reproductor, pruebe hls.js, introducido por DailyMotion. videojs-contrib-hls está relacionado con video.js. – Fawntasia
Para una respuesta más actualizada: MPEG-DASH está en el proceso de reemplazar HLS. HLS se usa principalmente en iOS land. La mayoría de los navegadores de escritorio no planean admitirlo, y DASH es el estándar al que se dirigen. (Sin embargo, hay muchos jugadores diseñados para permitirle usar HLS con un reproductor de video HTML5 como hls.js). Los jugadores de DASH incluyen Bitmovin, Google Shaka y más. Mucha gente codifica para HLS y DASH actualmente. HLS también admite mp4 fragmentado.Tenga en cuenta que deberá codificar sus videos correctamente en el lado del servidor. Recursos adicionales: http://www.streamingmedia.com/Articles/Articles/Editorial/Featured-Articles/The-State-of-MPEG-DASH-2016-110099.aspx
Hasta ahora, tendrías que tener tu contenido disponible en MPEG-DASH y HLS para brindar un amplio soporte de todas las plataformas. HLS admite ahora MP4 fragmentado, puede usar one single output format, que se reproduce en todos los dispositivos. Además, necesita 50% less storage, y como fMP4 es más eficiente en almacenamiento que MPEG-TS, que se usa para HLS en este momento, puede ahorrar aún más almacenamiento y ancho de banda.
Bitmovin proporciona un example cómo crear contenido HLS fMP4 y cómo reproducirlo.
Es un poco viejo, pero es posible que desee echar un vistazo a la prueba de velocidad [api] (http://speedof.me/api). – advncd