Vídeo HTML

50 min

La documentación a continuación se aplica a las versiones de firmware 7.1.x y posteriores.

Puede usar elementos <video> para reproducir video en streaming (HLS, UDP, RTP, RTSP) y archivos de video locales. También puede mostrar la entrada HDMI® en cualquier reproductor BrightSign que tenga entrada HDMI (consulte esta sección).

Video en streaming

La reproducción de video en streaming se logra utilizando el elemento HTML estándar <video> con un atributo src adecuado. Estos esquemas de URL pueden usarse para la reproducción:

http/https

rtsp

Tenga en cuenta que los comandos de pausa/reanudación actualmente funcionan solo para flujos HLS.

Control de elementos de video con JavaScript

Los eventos y controles asociados con un elemento de video HTML5 se describen aquí. Es importante tener en cuenta que el comportamiento de la API es asíncrono, por lo que los desarrolladores de aplicaciones deben configurar los controladores de eventos relevantes y crear una máquina de estados adecuada para su aplicación. En particular, tenga en cuenta lo siguiente.

Llamar a load() restablece un elemento de video a su estado inicial y comienza el proceso de sondeo de la fuente de video. El evento loadedmetadata se generará cuando el sondeo esté lo suficientemente completo. Para los reproductores BrightSign, el comportamiento de load() es equivalente a establecer {Resumen : Falso}, en roVideoPlayer, es decir, iniciar la reproducción en estado pausado.

Establecer o restablecer el atributo src en un elemento de video es equivalente a llamar a load(). Sin embargo, establecer el atributo src en una etiqueta incrustada <source> no lo es, y load() debe invocarse explícitamente.

El método play() inicia el proceso de reproducción, pero devuelve una Promesa que se resuelve una vez que la reproducción está en marcha, o se rechaza si no es posible reproducir por algún motivo.

Los desarrolladores de aplicaciones deben crear controladores para los eventos terminado y error (como mínimo).

No tener en cuenta la asincronía de la API puede provocar resultados inesperados. Considere lo siguiente:

videoElement.load()
videoElement.play()

Aquí, la intención presumiblemente es inicializar y reproducir el video. Sin embargo, una implementación compatible con la especificación HTML5 puede programar la llamada a load para que ocurra algún tiempo después de que el control vuelva a JavaScript, y el orden de las llamadas podría invertirse a jugar seguido de cargar dando como resultado un video que se inicia en estado pausado. En su lugar, cree un controlador loadedmetadata e invoque play() allí.

El siguiente es un ejemplo muy básico para transmitir un video a través de UDP. Tenga en cuenta que el controlador de errores está capturando el código de error 4. Esto puede ocurrir al intentar reproducir un video en streaming cuando el flujo no está disponible. El intento de reproducción agota el tiempo de espera después de seis segundos.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Video Test</title>
</head>
<body>
    <div id="video_container">
        <video id="test_video"></video>
    </div>

    <script src="video.js"></script>
</body>
</html>

var url = "udp://239.127.86.1:1234";
var video = document.getElementById('test_video');

function ReloadVideo() {
  // This causes a loadedmetadata event
  video.setAttribute('src', url);
}

video.addEventListener('ended', function() {
  ReloadVideo();
});

video.addEventListener('error', function(e) {
  if (!video.error) {
    return;
  }
    
  switch (video.error.code) {
    case 4:  // MEDIA_ERR_SRC_NOT_SUPPORTED
      ReloadVideo();
      break;
    default:
      break;
  }
});

video.addEventListener('loadedmetadata', async function() {
  try {
    await video.play();
  } catch (err) {
	  // play failed
  }
});

ReloadVideo();

Parámetros de streaming

Puede configurar el video en streaming utilizando varios atributos únicos de BrightSign. Estos atributos pueden ser anulados por parámetros que se incluyen en la URL de streaming.

Ejemplo (HTML)

<video src="udp://239.192.1.1:5004" x-bs-stream-timeout="0">

Ejemplo (JavaScript)

videoPlayer.setAttribute("x-bs-stream-low-latency", "1");

Se admiten los siguientes parámetros de transmisión:

[int] x-bs-stream-timeout: El tiempo (en milisegundos) que se debe esperar para que una transmisión se inicie antes de abandonar la reproducción. Pasar cero indica que el reproductor de video debe esperar indefinidamente. El valor de tiempo de espera predeterminado es de 5000 ms para transmisiones HTTP y de 3000 ms para todas las demás transmisiones.

[int] x-bs-stream-latency: La cantidad de desviación (en milisegundos) respecto al valor de latencia predeterminado: Por ejemplo, un valor de -500 reducirá la latencia en medio segundo; un valor de 500 aumentará la latencia en medio segundo; y un valor de 0 especificará la latencia predeterminada. Especificar un valor negativo no cambiará el tamaño del búfer; en su lugar, le dará al búfer menos tiempo para llenarse antes de que comience la reproducción. Los valores utilizables se extienden aproximadamente hasta -750, aunque este valor puede variar según el entorno de red. Reducir demasiado la latencia provocará tartamudeo evidente en la reproducción.

[int] x-bs-stream-fade-in: La duración del fundido de entrada (en milisegundos) para las transmisiones. De forma predeterminada, las transmisiones no HTTP tienen un valor de fundido de 1500 ms si contienen video y de 4000 ms si contienen solo audio. Las transmisiones HTTP tienen un valor de fundido predeterminado de 0 ms.

[int o booleano] x-bs-stream-low-latency: Modo de baja latencia para transmisiones RTSP. Configurar este parámetro en verdadero (1) logrará la menor latencia posible para una transmisión, pero con una tasa de bits máxima reducida, lo que suele ser útil para transmisiones de cámaras IP. Este parámetro está configurado en falso (0) de forma predeterminada.

[int] x-bs-intrinsic-width: El ancho intrínseco del video de origen

[int] x-bs-intrinsic-height: La altura intrínseca del video de origen.

Lograr baja latencia

Hay tres opciones para reducir la latencia en los reproductores BrightSign Series 3 y 4:

x-bs-stream-latency

La marca x-bs-stream-latency (búfer) descrita anteriormente en "Parámetros de transmisión". En este ejemplo, la latencia se reduce en medio segundo (500 milisegundos):

<video src="udp://239.192.1.1:5004" x-bs-stream-latency="-500">

x-bs-no-force-capture

Si la marca x-bs-no-force-capture está configurada en verdadero, la captura de video omitirá la conversión de velocidad de fotogramas e introducirá las siguientes limitaciones:

Los valores de transformación distintos de "identity" no funcionarán.

Es posible que las capturas de pantalla no sean correctas

La velocidad de fotogramas del video codificado y la salida del modo de video deben coincidir

Por ejemplo:

<video src="udp://239.192.1.1:5004" x-bs-no-force-capture="1">

x-bs-no-reordering

Si la marca x-bs-no-reordering está configurada, mejorará la latencia, pero deshabilitará la reproducción de B-slices. Por ejemplo:

<video src="udp://239.192.1.1:5004" x-bs-no-reordering="1">

Consulte esta página para obtener más información sobre cómo modificar la latencia de transmisiones de audio o video.

Reproductor multimedia nativo de Chrome

Los reproductores Series 5 admiten seleccionar Chrome nativo para la reproducción de video con aceleración por hardware o usar el BrightSign Media Player predeterminado para la reproducción de video. Puede elegir qué opción es mejor para su caso de uso (consulte Opciones de reproducción HTML en reproductores Series 5HTML Playback Options on Series 5 Players).

WebRTC

Para WebRTC, BrightSign OS siempre usa la reproducción de video nativa de Chrome.

Los reproductores Series 5 que ejecutan OS 9.0.115 y versiones posteriores usarán automáticamente decodificación acelerada por hardware en este caso.

Los reproductores Series 4 y anteriores no admiten decodificación acelerada por hardware con reproducción de video nativa de Chrome. Por lo tanto, la decodificación se realizará por software, y solo recomendamos probar este enfoque con reproductores XT4.

Tamaño intrínseco del video

El siguiente orden de precedencia se utiliza para determinar el tamaño intrínseco de un video:

Los atributos x-bs-intrinsic-width y x-bs-intrinsic-height atributos

El tamaño de la imagen especificada por el atributo póster

Los atributos ancho y altura del elemento <video>

El tamaño según lo informado por WebMediaPlayer

El tamaño predeterminado de CSS, según lo definido por W3C: 300x150

Si solo se especifican los atributos ancho y altura de un elemento <video> , el motor de renderizado asume que el tamaño intrínseco del video fuente es el mismo que el tamaño del elemento <video> , por lo que escalará el video para llenar el elemento de video, ignorando la relación de aspecto del video fuente si es necesario. Además, si los atributos ancho y altura de un <video> no se especifican y el tamaño no está disponible desde las fuentes (por ejemplo, si la transmisión aún se está cargando), el video utilizará inicialmente de forma predeterminada una resolución de 300x150.

Si conoce de antemano el tamaño o la relación de aspecto de un video fuente, puede usar los atributos x-bs-intrinsic-width/x-bs-intrinsic-height para garantizar que se mantenga la relación de aspecto del video fuente cuando se escale para ajustarse a un elemento <video> : Por ejemplo, si la ventana de video está orientada como HD vertical (width=1080, height=1920), especificar un ancho y alto intrínsecos de 1920x1080 garantiza que los videos HD horizontales se escalen para ajustarse mientras mantienen su relación de aspecto y el letterboxing de forma adecuada. Del mismo modo, los videos se escalarán al ancho/alto intrínseco inmediatamente si el elemento <video> carece de parámetros ancho y altura , en lugar de posiblemente usar el valor predeterminado de 300x150 durante un breve período

YouTube

Los reproductores BrightSign son compatibles con videos y listas de reproducción de YouTube.

Media Source Extensions

A partir de OS 8.3, Media Source Extension (MSE) está habilitado automáticamente en los reproductores Serie 4. Sin embargo, aún puede deshabilitarse estableciendo el indicador mse-support en 0 en el registro.

La compatibilidad con MSE está disponible para la serie 3, pero debe habilitarse específicamente. Para hacerlo, introduzca el siguiente código en el símbolo del sistema de BrightSign:

registry write html mse-support 1

Transmisión en vivo HLS

Los reproductores BrightSign son compatibles con la transmisión en vivo HLS, pero las listas de reproducción grandes (que normalmente resultan de que el servidor entregue una lista de reproducción DVR en lugar de una lista de reproducción LIVE) causarán problemas de rendimiento.

Entrada HDMI

Debe introducir la fuente de video usando el siguiente URI: “tv:brightsign.biz/hdmi”. Tenga en cuenta que no puede sustituir otra URL de host por “brightsign.biz”.

Ejemplo

<video width="320" height="240" autoplay>
       <source src="tv:brightsign.biz/hdmi">
</video>

Múltiples elementos de video

De forma predeterminada, los reproductores XT, 4K y XD admiten un máximo de dos elementos <video> activos en cualquier momento (los modelos HD/LS solo admiten uno). Puede tener más de esta cantidad de elementos <video> en una página siempre que los elementos <video> adicionales tengan su atributo src establecido en una cadena vacía. Al modificar la cadena src , puede habilitar y deshabilitar elementos <video> en la página.

Puede habilitar Mosaic Mode (usando el método JavaScript BSVideoMode ) para aumentar la cantidad mínima permitida de elementos <video> .

Videos pequeños

Los reproductores BrightSign no admiten videos que tengan menos de 64 píxeles de ancho o alto. Sin embargo, un video puede reducirse más allá de este límite haciendo que el elemento <video> sea más pequeño que 64x64. Para obtener el comportamiento de reducción deseado, asegúrese de que el elemento <video> no tenga el atributo viewmode="scale-to-fill-and-crop" .

Modo de visualización

En las versiones de firmware 7.0.x y posteriores, el video HWZ se escala para ajustarse a la relación de aspecto de un elemento <video> (es decir, "escalar-para-rellenar"). En versiones anteriores del firmware, los elementos <video> mantienen la relación de aspecto del video de origen (es decir, "ajustar a la escala"). Este comportamiento predeterminado puede modificarse mediante el atributo viewmode; sin embargo, ahora recomendamos usar métodos CSS estándar (por ejemplo, object-fit) para modificar el comportamiento del modo de visualización de un elemento <video> .

viewmode="scale-to-fill": Escala el video para llenar la ventana. La relación de aspecto del video de origen se ignora, por lo que el video puede verse estirado.

viewmode="scale-to-fit": Añade bandas negras al video.

viewmode="scale-to-fill-and-crop": Escala el video para llenar la ventana. La relación de aspecto del video de origen se mantiene, por lo que el video puede recortarse.

Video HWZ

Los elementos HTML <video> pueden tener un atributo opcional “hwz”, que está deshabilitado de forma predeterminada. Con hwz deshabilitado, los fotogramas de video se decodifican mediante el hardware dedicado, pero se envían a la GPU para su visualización. Con hwz habilitado, los fotogramas de video se envían directamente al compositor de hardware, omitiendo la GPU. La elección de habilitar o no hwz depende de la aplicación y no existe una única respuesta claramente correcta. Algunas consideraciones son:

La GPU está limitada a una profundidad de color de 8 bits. Si se utiliza video de 10 bits, debe enviarse al plano de video de hardware para conservar toda la profundidad de color.

En la mayoría de los casos, la GPU está limitada a resoluciones full-HD. Si se utiliza video 4K, debe enviarse al plano de video de hardware para evitar la pérdida de resolución. (Incluso en plataformas que pueden configurarse para admitir gráficos 4K, es poco probable que la GPU alcance una velocidad de fotogramas lo suficientemente alta para la reproducción de video con movimiento completo).

El compositor de video por hardware puede realizar escalado simple y mezcla alfa, pero no admite transformaciones CSS arbitrarias. El video con estilos CSS complejos debe enviarse a través de la GPU para mostrarse correctamente. Del mismo modo, cualquier video que necesite capturarse como un canvas para procesamiento WebGL debe enviarse a la GPU. Si desea usar transformaciones CSS en video, el rendimiento del reproductor disminuirá, ya que se basa en el uso de HWZ en lugar de la GPU. Recomendamos probar exhaustivamente un video hwz manipulado antes de usarlo en un entorno de producción.

Si el video se envía a la GPU, se requiere un redibujado gráfico para cada fotograma. Esto consume una gran cantidad de ancho de banda del sistema y puede provocar una reproducción entrecortada si la GPU no puede mantener la velocidad de fotogramas requerida en todo momento.

En general, recomendamos enviar el video al compositor de hardware a menos que exista una necesidad específica de procesamiento por la GPU. Para la mayoría de las aplicaciones, enviar el video al compositor de hardware puede lograrse configurando hwz="z-index:-1" en el elemento de video en cuestión. Esto hace que el compositor apile las capas de video y gráficos según la propiedad CSS z-index.

También puede habilitar hwz para todos los videos en un widget HTML utilizando uno de los siguientes métodos:

BrightSign Author: Seleccione la casilla Habilitar la reproducción de video nativa en HTML5 State.

BrightAuthor Classic: Marque la casilla Habilitar la reproducción nativa del plano de video en el estado HTML5.

BrightScript: Llame a SetHWZDefault("on") en la instancia de roHtmlWidget .

Orden Z del video HWZ

Si dos elementos de video deben enviarse al compositor de hardware, a uno de ellos se le debe asignar hwz="z-index:-2". El que tenga el z-index más bajo (más negativo) se apilará detrás del otro. (Tenga en cuenta que en esta instancia específica se anula el orden de apilamiento CSS). Alternativamente, es posible pasar un valor positivo de z-index en el atributo hwz. Si se hace esto, los elementos de video se apilarán delante de la capa gráfica, nuevamente anulando el orden de apilamiento CSS, y el que tenga el valor positivo de z-index más alto quedará al frente.

Para enviar la reproducción de video a la GPU, pase hwz="off" o hwz="z-index:0" (son equivalentes). El valor heredado hwz="on" es equivalente a hwz="z-index:1" y debe evitarse.

Puede usar la propiedad CSS z-index para superponer los elementos sin habilitar hwz. El orden de las capas que se muestra a continuación es texto arriba → video en el medio → imagen atrás:

<body style="background-color:blue">
  <div style="position:absolute;color:red;font-size:100px;z-index:-1" > Hello BrightSign </div>
  <img src="poster.png" style="position:absolute;left:0px;top:0px;width:800px;height:800px;z-index:-3"></img>
  <video src="coffee2.mp4" style="position:absolute;left:0px;top:0px;width:480px;height:320px;z-index: -2;" autoplay loop muted></video>
</body>

Si hwz está habilitado, su propiedad CSS z-index (style="z-index:-1") será anulada. Agregue un valor z-index en el atributo hwz para mantener las posiciones correctas del orden z para todos los elementos:

<body style="background-color:blue">
  <div style="position:absolute;z-index:-1;color: red;font-size: 100px;" hwz="z-index:-1"> Hello World </div>
  <img src="poster.png" style="position:absolute;left:0px;top:0px;width:800px;height:800px;z-index:-3" hwz="z-index:-3"></img>
  <video src="coffee2.mp4" style="position:absolute;left:0px;top:0px;width:480px;height:320px;z-index: -2;" hwz="z-index:-2" autoplay loop muted></video>
</body>

Transformación de video HWZ

Puede agregar el parámetro opcional "transform" al atributo "hwz" para rotar o reflejar el elemento <video> . El parámetro z-index: debe especificarse también para que la transformación funcione. Al parámetro "transform" se le pueden asignar los siguientes valores:

identidad: Sin transformación (comportamiento predeterminado)

rot90: Rotación de 90 grados en sentido horario

rot180: Rotación de 180 grados

rot270: Rotación de 270 grados en sentido horario

espejo: Transformación de reflejo horizontal

mirror_rot90: Rotación reflejada de 90 grados en sentido horario

mirror_rot180: Rotación reflejada de 180 grados en sentido horario

mirror_rot270: Rotación reflejada de 270 grados en sentido horario

Múltiples extensiones de etiquetas de video HWZ se separan con un punto y coma. También debe agregarse un punto y coma al parámetro final.

Ejemplo

 // Video rotated 180 degrees and behind graphics layer.
<video src="example_movie.mp4" hwz="z-index:-1; transform:rot180;">

Desvanecimiento de flujos de video HWZ

El parámetro "fade" le permite controlar el comportamiento de desvanecimiento entre videos en streaming en un elemento <video> (esta configuración no se aplica al video local). El parámetro "fade" le permite controlar el comportamiento de desvanecimiento entre videos decodificados en un elemento <video> (esta configuración no se aplica a HDMI in). No afecta el audio y funcionará independientemente de DesvanecimientoDeFlujoDeEntrada.

El parámetro "fade" acepta los siguientes valores:

auto: Si el reproductor de video actualmente no muestra nada (es decir, todavía no ha reproducido nada o el video cargado anteriormente fue borrado), el siguiente video aparecerá con un desvanecimiento. Si el reproductor de video actualmente está reproduciendo video, está pausado o está detenido sin haber sido borrado, el siguiente video no aparecerá con desvanecimiento. Este es el comportamiento predeterminado.

siempre : Cuando termina un video, la ventana de video se volverá negra. Luego, el nuevo video aparecerá con un desvanecimiento.

nunca: Los videos realizan la transición sin efectos de desvanecimiento.

Extensiones de transparencia de video HWZ

Si hwz está habilitado para un elemento <video>, la ventana de video también puede admitir claves luma y chroma para transparencia de video. Esta es la implementación alternativa de transparencia de video de BrightSign cuando se usa el BrightSign MPV nativo.

Codificación de valor de clave

El parámetro z-index: también debe especificarse para que la transparencia funcione. Las claves luma y chroma se especifican de la siguiente manera:

luma-key:[VALUE]

cr-key:[VALUE]

cb-key:[VALUE]

Cada VALUE es un rango empaquetado de 3 bytes detrás del #:

#[máscara de 8 bits][extremo superior de 8 bits del rango][extremo inferior de 8 bits del rango]

# es obligatorio, y eliminarlo invalida el atributo hwz.

La máscara casi siempre es FF para habilitar la clave.

El extremo superior/inferior del rango es el rango inclusivo de 0–255 de valores de píxeles que deben hacerse transparentes mediante clave. Por ejemplo, para luma-key:#FF2000:

la máscara es FF

alto 0x20 (32), bajo 0x00 (0) significa hacer transparente la luma 0–32.

La máscara se aplica como un AND bit a bit entre el componente luma/Cb/Cr (muestra) y el valor de la máscara. En la práctica, los valores típicos utilizados serían 0x00 o 0xFF. Una máscara de 0x00, con un valor mínimo de 0x00, deshabilita completamente la contribución de ese componente particular a la clave. Por ejemplo, si tanto la máscara Cb como los valores mínimos están establecidos en 0x00, el componente Cb no participa en la incrustación. Una máscara de 0xFF significa que el valor de muestra sin máscara debe estar dentro del rango min <= sample_val <= max para ser incrustado.

En reproductores Series 5+, el comportamiento de incrustación actualmente no está definido si se utiliza una clave luma de #000000. Como solución alternativa, especifique el valor máximo como 1 (es decir, use una clave luma de #000001), junto con los valores Cr-key/Cb-key apropiados para la incrustación chroma.

Ejemplo

Este es un ejemplo de un video en la capa de video, delante de la capa de gráficos, con video con luma key:

Consulte el complemento Plugin BrightAuthor ChromaLuma-Key-Editor para ver un ejemplo de complemento.

Cómo se seleccionan los decodificadores de video para la reproducción

El software del sistema selecciona qué decodificador de video usar según la resolución detectada del archivo de video. En el modo estándar, intentará seleccionar el decodificador que tenga la resolución máxima compatible más cercana (es decir, 1920x1080 para el decodificador HD y 3840x2160 para el decodificador 4K), sin exceder esa resolución máxima. Si un decodificador ha sido configurado para el modo Mosaic, hará coincidir la resolución del video con el timeslice_mode especificado en su lugar. Si ambos decodificadores admiten la misma resolución máxima, puede seleccionar un decodificador haciendo coincidir el orden z de la instancia de roVideoPlayer (establecido mediante los métodos ToFront() y ToBack() ) con el orden z del decodificador (establecido mediante el método roVideoMode.SetDecoderMode() ).

También puede seleccionar el decodificador manualmente. Primero, configure el o los decodificadores usando el método roVideoMode.SetDecoderMode() . Luego, use el nombre_descriptivo especificado al llamar al método para designar un decodificador que se usará para la reproducción de video.

Para seleccionar un decodificador en BrightScript, pase un arreglo asociativo al método roVideoPlayer.PlayFile() que contenga el parámetro decoder:[friendly_name] :

PlayFile({filename:"text_1.mov", decoder:"main-video"})

Para seleccionar un decodificador para video HTML, incluya la propiedad decoder:[friendly_name] con el atributo hwz :

El valor max_usage de un decodificador determina cuántos reproductores de video pueden asignarse al decodificador usando el algoritmo de software del sistema descrito anteriormente; los reproductores de video que excedan el límite de max_usage pueden ser asignados a otro decodificador o no mostrarse en absoluto. Por otro lado, si asigna manualmente reproductores de video usando el nombre_descriptivo del decodificador, puede asignar más reproductores de video al decodificador que el límite de max_usage , pero esto puede causar un comportamiento impredecible de la visualización de video.

Descifrado de video

La etiqueta HTML <video> puede usarse para descifrar archivos de video y streams IP. Actualmente, el descifrado de streaming solo es compatible con el protocolo UDP y el protocolo HTTP (cuando HTTP se combina con un stream de transporte MPEG2). Si usa un stream de transporte MPEG2 multicast UDP, uno de los streams elementales debe proporcionar el PCR al reproductor.

La etiqueta <video> admite los métodos AlgoritmoDeCifrado y EncryptionKey :

AlgoritmoDeCifrado: El algoritmo de cifrado de archivos. Las siguientes son las opciones actuales:

"AesCtr": El algoritmo AES en modo CTR

"AesCtrHmac": El algoritmo AES en modo CTR con HMAC

"TsAesEcb": El algoritmo AES en modo ECB (por ejemplo, con un Harmonic Prostream). Actualmente, este algoritmo se usa para cifrado/descifrado de streaming.

"TsAesEcbRrt": El algoritmo AES en modo ECB (por ejemplo, con un Harmonic Prostream) con terminación residual trasera. Este algoritmo se usa para cifrado/descifrado de streaming. Disponible desde la versión 9.1.164 en todos los reproductores excepto LS3, HD3, HS3, HO3, XD3, XT3, LS4, HS4 y HD4.

"TsAesCbcRbt": El algoritmo AES en modo CBC con terminación de bloque residual. Este algoritmo se usa para cifrado/descifrado de streaming.

"TsAesCbcCbt": El algoritmo AES en modo CBC con terminación de bloque limpia. Este algoritmo se usa para cifrado/descifrado de streaming.

EncryptionKey: Un arreglo de bytes que consta de 128 bits de clave. Si el algoritmo de cifrado es AES-CTR o AES-CTR-HMAC, esto va seguido de 128 bits de IV.

Ejemplo (HTML)

<video src="udp://239.192.1.59:5000" EncryptionAlgorithm="TsAesEcb" EncryptionKey="01030507090b0d0f00020406080a0c0e">

El reproductor de video ya no acepta claves de cifrado AES "{A|A}" (es decir, donde los 64 bits superiores e inferiores de la clave son idénticos).

Ejemplo (JavaScript)

var player = document.getElementById("my_video_player");
player.setAttribute("EncryptionAlgorithm", "TsAesEcb");
player.setAttribute("EncryptionKey", "01030507090b0d0f00020406080a0c0e");

Análisis de flujo y subtítulos

Los siguientes atributos opcionales pueden incluirse en una etiqueta HTML <video> : "preferredvideo", "preferredaudio" y "preferredcaptions". Si varios flujos de video, audio o datos están encapsulados en la entrada de video, estos atributos le permiten determinar qué flujo usar. Por ejemplo, si un video puede contener pistas de audio en inglés y español, puede usar el atributo "preferredaudio" para especificar que se reproduzca la pista en español si existe; de lo contrario, el video usará por defecto la pista en inglés.

Los flujos preferidos se eligen haciendo coincidir los patrones de texto proporcionados con la descripción textual del flujo:

Cada atributo ("preferredvideo", "preferredaudio" o "preferredcaptions") es una lista de plantillas separadas por punto y coma.

Cada plantilla es una lista de patrones separados por comas.

Cada patrón es un par [field_name]=[field_value] que se compara directamente con la descripción del flujo.

Flujos de video

Cada plantilla en un atributo "preferredvideo" puede contener los siguientes patrones:

pid=[integer]: El identificador de paquete (PID) del flujo de video que desea mostrar

programa=[entero]: El número de programa del flujo de video

codec=[video_codec]: El códec de video preferido, que puede ser cualquiera de los siguientes:

MPEG1

MPEG2

MPEG4Part2

H263

H264

H265

ancho=[integer]: El ancho de video preferido

altura=[integer]: La altura de video preferida

aspect=[float(x.yy)]: La relación de aspecto preferida del flujo de video como un número de punto flotante con dos dígitos fraccionarios.

profundidaddecolor=[integer]: La profundidad de color preferida del video.

Ejemplo

preferredvideo="pid=7680, codec=H264, width=1280, height=720, aspect=1.78, colordepth=8;;"

Flujos de audio

Cada plantilla en un atributo "preferredaudio" puede contener los siguientes patrones:

pid=[integer]: El identificador de paquete (PID) del flujo de audio que desea reproducir

programa=[entero]: El número de programa del flujo de audio

codec=[audio_codec]: El códec de audio preferido, que puede ser cualquiera de los siguientes:

MPEG

AAC-PLUS

AC3-PLUS

FLAC

Vorbis

channels=[integer]: El número preferido de canales de audio (de 1 a 8)

freq=[frecuencia]: La frecuencia de muestreo preferida de la pista de audio, que puede ser cualquiera de las siguientes:

32000

44100

48000

lang=[idioma]: Un código que determina el idioma preferido de la pista de audio (por ejemplo, ing, spa). Los códigos de idioma se especifican en el estándar ISO 639-2.

type=[audio_type]: El tipo de audio preferido, que puede ser uno de los siguientes:

Audio principal

Efectos limpios

Personas con discapacidad auditiva

Comentarios para personas con discapacidad visual

Ejemplo

preferredaudio="pid=4192, codec=AC3, channels=5, freq=48000, lang=eng, type=Main audio;;"

Flujos de subtítulos y captions

Los términos "caption", "closed captions" y "closed captioning" se usan indistintamente en estos documentos.

Cada plantilla en un atributo "preferredcaption" puede contener los siguientes patrones:

pid=[integer]: El identificador de paquete (PID) del flujo de captions que desea reproducir

type=[subtitle_type]: El estándar de codificación de los subtítulos. Este valor puede ser uno de los siguientes:

CEA708: Si el estándar CEA-708 no está presente, subtitle_type usará CEA-608 de forma predeterminada (si está presente).

CEA608

lang=[idioma]: Un código que determina el idioma preferido de los subtítulos (por ejemplo, ing, spa). Los códigos de idioma están especificados en el estándar ISO 639-2.

service=[integer]: El número de servicio preferido del flujo de captions

Ejemplo

preferredcaptions="pid=0, type=Cea708, lang=eng service=1;;"

Los subtítulos y captions se renderizan en la capa gráfica, y hwz debe establecerse en z-index -1 o z-index -2 para colocar el video detrás de los gráficos. De lo contrario, el video cubrirá los subtítulos y/o captions.

Comportamiento de coincidencia de patrones

Tenga en cuenta lo siguiente al hacer coincidir plantillas con descripciones de flujos:

Para que una plantilla coincida con una descripción de flujo, cada patrón dentro de la plantilla debe coincidir.

Se utilizará la primera plantilla listada que coincida con la descripción del flujo (si existe alguna).

Una cadena de plantilla vacía coincidirá con cualquier descripción de flujo.

Todas las comparaciones de valores distinguen mayúsculas y minúsculas.

Los valores numéricos deben coincidir exactamente con la descripción del flujo (sin ceros a la izquierda). Por ejemplo, el patrón pid=016 nunca coincidirá con el valor PID del flujo de 16.

Para indicar negación lógica, aplique el signo de exclamación "!" al comienzo de un patrón. Por ejemplo, especificar preferredvideo="!codec=H265" solo coincidirá con flujos que no estén codificados usando H.265.

Aplique el símbolo mayor que ">" antes de un entero para indicar que, para una coincidencia exitosa, el valor en la descripción del flujo debe ser mayor que el valor que sigue al símbolo. Por ejemplo, especificar preferredvideo="width=<1921,height=<1081" solo coincidirá con videos que no sean más grandes que full-HD.

Aplique el símbolo menor que "<" antes de un entero para indicar que, para una coincidencia exitosa, el valor en la descripción del flujo debe ser menor que el valor que sigue al símbolo.

Más ejemplos

La siguiente lista de plantillas contiene tres patrones: lang=eng, lang=spa, y una cadena vacía. El primer patrón especifica un canal en inglés; si el canal en inglés no existe, el segundo patrón especifica un canal en español. El tercer patrón especifica cualquier otro canal si los dos primeros no existen (la cadena vacía coincide con cualquier cosa).

preferredaudio="lang=eng;lang=spa;;"

Dado que la siguiente lista de plantillas está vacía, no se especifican captions. Esto puede utilizarse para desactivar completamente los captions.

preferredcaptions=""

La siguiente lista de plantillas contiene una plantilla de cadena vacía. Dado que una plantilla vacía coincide con cualquier cosa, se reproducirá el primer flujo de video encontrado. Este es el comportamiento predeterminado de todos los atributos.

preferredvideo=";"

La siguiente lista de plantillas especifica un flujo de audio de 48KHz si existe uno; de lo contrario, no se reproducirá ningún flujo de audio. Observe que la lista no termina con un punto y coma; en este caso, el punto y coma se proporciona implícitamente.

preferredaudio="freq=48000"

La siguiente lista de plantillas contiene dos plantillas. Tenga en cuenta que todos los patrones dentro de una plantilla deben coincidir con la descripción del flujo para que toda la plantilla coincida. En este ejemplo, se prefiere una pista en inglés codificada con AAC; una pista en inglés codificada con MP3 se designa como la segunda opción; y se elegirá cualquier pista si ninguna plantilla coincide.

preferredaudio="codec=aac,lang=eng;codec=mp3,lang=eng;;"

Cambio de pista de video

El framework de reproducción multimedia de BrightSign no admite el cambio dinámico entre pistas mediante video/audio HTML5. Sin embargo, sí admite consultar información de pistas usando la API de Tracklist. Los siguientes pasos describen cómo seleccionar pistas usando esta API.

Cree un elemento de video en JavaScript que no esté adjunto al DOM (es decir, que sea invisible).

Configure el detector de eventos onloadedmetadata .

Configure el src de la URL multimedia.

Llame a load() en el elemento de video HTML5. Esto activará el evento loadedmetadata .

Lea la información de la pista del evento.

Cree un nuevo reproductor de video HTML5 y use la información de la pista para configurar los parámetros audioPreferido, preferredVideo, y preferredSubtitle (descritos anteriormente).

Llame a load()/play() en el elemento de video.

Adjunte el elemento de video al DOM.

Al cambiar de un video a otro, es importante configurar la fuente del video para que esté vacía a fin de liberar el elemento de video; de lo contrario, el primer video o videos continuarán usando memoria mientras se reproducen los videos posteriores. Consulte la línea 12 en el siguiente ejemplo de código.

Ejemplo

<!DOCTYPE html>
<head>
  <script>
var video;

function playTrackNext()
{
  // Switch to audio/video 1
  var pid = video.videoTracks[1].id;
  var audiopid = video.audioTracks[1].id;
  // release the video element
  video.src = "";                            
  // create a new video element
  video = document.createElement('video');   
  video.src = "http://brightsign.biz/example.ts";
  video.hwz = "on";
  video.preferredvideo = "pid=" + pid;       
  // use the params we gathered from previous video load
  video.preferredaudio = "pid=" + audiopid;
  video.load();
  video.play();
  document.getElementById("videoarea").appendChild(video);
}


function runTest()
{
  // Initialize testing bs/javascript bridge.
  bs.start();
  // Initial load of media to gather track information
  video = document.createElement('video');
  video.onloadedmetadata = playTrackNext; // play track 0
  video.src = "http://brightsign.biz/example.ts";
  video.hwz = "on";
  video.load(); // will trigger loadedmetadata event once the video is loaded.
}
  </script>
</head>
<html>
  <body bgcolor="#E6E6FA" onload="runTest()">
    <h1>Video Audio Tracks Test Page</h1>
    <div id="videoarea"></div>
</html>

Enrutamiento de audio de elementos <audio>/<video>

Los reproductores BrightSign tienen atributos de audio únicos para los elementos <audio>/<video> . Estos le permiten controlar cómo se enruta el audio a través de las salidas del reproductor:

Pcmaudio: Audio PCM

Compaudio: Audio comprimido

Multiaudio: Audio multicanal

A cada atributo se le pueden pasar los siguientes valores, que determinan hacia dónde se enrutará el audio:

“ninguno”

"HDMI” o "hdmi-1", "hdmi-2", "hdmi-3", o "hdmi-4" para reproductores de la Serie 5 con múltiples salidas

“usb”

“spdif”

"análogo"

“analog:N” (N especifica la enumeración del puerto, lo cual es útil para modelos con múltiples puertos de audio analógico; también puede usar "analog:1" para especificar la salida analógica en un modelo con un único puerto de audio analógico)

Si no asigna ningún atributo de audio a un elemento <audio>/<video>, el audio se enrutará a todas las salidas de audio, junto con cualquier otro audio que se esté reproduciendo actualmente.

Ejemplo 1

<video src="example_movie.mp4" width="512" height="400" pcmaudio="hdmi" autoplay>
  Your browser does not support the video tag.
</video>

Ejemplo 2

<video src="example_movie.mp4" width="512" height="400" compaudio="hdmi;usb" autoplay>
  Your browser does not support the video tag.
</video>

Reproducción de código de tiempo de video HTML

La precisión de BrightSign para la reproducción de código de tiempo de video HTML es de 200 ms.

Chroma Keying

La configuración de chroma key de BrightSign consiste en una máscara y un valor mínimo y máximo. Los valores mínimo y máximo son los más importantes, ya que la máscara realmente solo es útil para “efectos especiales”. Cada píxel de cada fotograma se verifica para ver si está entre los valores mínimo y máximo y, si lo está, el píxel se establece como completamente transparente. Si está fuera del rango, el píxel es completamente opaco. Esto significa que tendrá un borde duro, no un desvanecimiento gradual, donde el video pasa de opaco a transparente.

Consejos de Chroma Key

Para obtener un mejor chroma keying, no aplique anti-aliasing a ningún píxel que deba ser transparente. Entonces podrá apuntar a un único color de transparencia en lugar de un rango.

Si su video está comprimido, el chroma está submuestreado, por lo que habrá bordes donde el chroma terminará siendo un valor intermedio entre el verde y el color del fotograma. Las animaciones CGI con agujeros verdes suelen tener anti-aliasing, lo que dará como resultado un desvanecimiento verde alrededor de los bordes. Es posible que pueda eliminar mediante chroma key estos bordes con los valores mostrados en los ejemplos a continuación (en estos ejemplos, v es un objeto roVideoPlayer).

El color más fácil de eliminar del contenido es el negro, que tiene un valor de luma de 0, porque el video tiene chroma submuestreado (4:2:0 en lugar de 4:4:4). El uso de luma keying significa que cada píxel puede procesarse con keying de manera precisa.

El blanco tiene una luma de 240 (no es exactamente un valor completo de 8 bits), pero el chroma puede significar que contiene muchos otros colores brillantes, por lo que es difícil simplemente eliminar el blanco.

Los colores arbitrarios son difíciles de tratar, ya que implican especificar un pequeño rango de valores chroma que debe calcularse. El color que se va a eliminar debe calcularse en YCbCr, y los valores Cb y Cr se utilizan para el chroma keying. Si la fuente es CGI, entonces el rango utilizado puede ser muy estrecho, ya que un único color se vuelve transparente. Si la fuente de video fueron imágenes en vivo grabadas frente a una pantalla verde, entonces el rango debe ser mucho más amplio para acomodar la gama de colores verdes en el video.

Ejemplos

Valores inferiores de Chroma Key

Aquí el rango Cr es 0-32 y el rango Cb es 0-48. Esto puede dejar un halo verde alrededor de las áreas que se mezclaron para dar una apariencia más suave, ya que el chroma keying no puede realizar transiciones suaves.

v.SetKeyingValue({cr:&hff2000, cb:&hff3000})

Valores superiores de Chroma Key

Este ejemplo cubre un rango mucho más amplio de colores:

v.SetKeyingValue({cr:&hff7000, cb:&hff7000})

Otras configuraciones

Mostrar/Omitir fotogramas

Esta configuración le permite configurar si se deben mostrar los fotogramas con errores o descartarlos (lo que puede causar pausas). Está disponible a partir de BOS 9.1.137.

<video id="myVideo" src="stream.ts" x-bs-drop-error-frames="false" autoplay></video>