HTML Video

the documentation below applies to firmware versions 7 1 x and later you can use \<video> elements to play streaming video (hls, udp, rtp, rtsp) and local video files you can also display hdmi® input on any brightsign player that has hdmi input (see hardware docid\ uyyjyej6qojy1hksbrlpu ) streaming video streaming video playback is achieved using the standard html \<video> element with an appropriate src attribute these url schemes can be used for playback http/https udp rtp rtsp note that pause/resume commands currently work for hls streams only streaming parameters you can configure streaming video using a number of unique brightsign attributes these attributes can be overridden by parameters that are included in the customize network streaming docid 0tioy9pjdgg4g25ygbnib example (html) \<video src="udp\ //239 192 1 1 5004" x bs stream timeout="0"> example (javascript) videoplayer setattribute("x bs stream low latency", "1"); the following streaming parameters are supported \[int] x bs stream timeout the length of time (in milliseconds) to wait for a stream to start before abandoning playback passing zero indicates that the video player should wait indefinitely the default timeout value is 5000ms for http streams and 3000ms for all other streams \[int] x bs stream latency the amount of deviation (in milliseconds) from the default latency value for example, a value of 500 will reduce the latency by half a second; a 500 value will increase the latency by half a second; and a 0 value will specify the default latency specifying a negative value will not change the buffer size; instead, it will give the buffer less time to fill up before playback begins usable values extend to approximately 750, though this value may differ depending on the network environment reducing the latency too much will result in obvious playback stutter \[int] x bs stream fade in the fade in length (in milliseconds) for streams by default, non http streams have a fade value of 1500ms if they contain video and 4000ms if they contain audio only http streams have a default fade value of 0ms \[int or boolean] x bs stream low latency low latency mode for rtsp streams setting this parameter to true (1) will achieve the lowest possible latency for a stream, but at a reduced maximum bitrate–which is often useful for ip camera streams this parameter is set to false (0) by default \[int] x bs intrinsic width the intrinsic width of the source video \[int] x bs intrinsic height the intrinsic height of the source video achieving low latency there are three options to reduce latency on series 3 and 4 brightsign players x bs stream latency the x bs stream latency flag (buffer) described above under "streaming parameters" in this example, the latency is reduced by half a second (500 milliseconds) \<video src="udp\ //239 192 1 1 5004" x bs stream latency=" 500"> x bs no force capture if the x bs no force capture flag is set to true , video capture will bypass frame rate conversion and introduce the following limitations transform values other than "identity" will not work screenshots may not be correct the encoded video frame rate and the video mode output must match for example \<video src="udp\ //239 192 1 1 5004" x bs no force capture="1"> x bs no reordering if the x bs no reordering flag is set, it will improve latency but disable playback of b slices for example \<video src="udp\ //239 192 1 1 5004" x bs no reordering="1"> see customize network streaming docid 0tioy9pjdgg4g25ygbnib for more information about modifying the latency of audio or video streams native chrome media player series 5 players support selecting native chrome for video playback with hardware acceleration or using the default brightsign media player for video playback you can pick which option is best for your use case (see html playback options on series 5 players docid\ wx7rhjmrg74eqxgxrwqtd ) webrtc for webrtc, brightsign os always uses native chrome video playback series 5 players, running os 9 0 115 and later, will automatically use hardware accelerated decode in this case series 4 and older players do not support hardware accelerated decode with native chrome video playback as such, the decode will be done in software, and we only recommend trying this approach with xt4 players intrinsic video size the following order of precedence is used to determine the intrinsic size of a video the x bs intrinsic width and x bs intrinsic height attributes the size of the image specified by the poster attribute the width and height attributes of the \<video> element the size as reported by the webmediaplayer the css default size, as defined by w3c https //www w3 org/tr/2011/wd html5 20110113/video html 300x150 if only the width and height attributes of a \<video> element are specified, the rendering engine assumes that the intrinsic size of the source video is the same as the \<video> element size, so it will scale the video to fill the video element, ignoring the aspect ratio of the source video if necessary additionally, if the width and height attributes of a \<video> are not specified and the size is not available from the sources (for example, if the stream is still loading), the video will initially default to a resolution of 300x150 if you know the size or aspect ratio of a source video beforehand, you can use the x bs intrinsic width / x bs intrinsic height attributes to ensure the aspect ratio of the source video is maintained when scaled to fit a \<video> element for example, if the video window is oriented as portrait hd ( width=1080, height=1920 ), specifying an intrinsic width and height of 1920x1080 ensures that landscape hd videos will scale to fit while maintaining their aspect ratio and letter boxing appropriately likewise, videos will scale to the intrinsic width/height immediately if the \<video> element lacks width and height parameters, rather than possibly defaulting to 300x150 for a short time youtube brightsign players support youtube videos and playlists media source extensions as of os 8 3, media source extension (mse) is enabled automatically on series 4 players however, it can still be disabled by setting the mse support flag to 0 in the registry mse support is available for series 3 but it must be specifically enabled to do this, enter the following code at the brightsign prompt registry write html mse support 1 hls live streaming brightsign players support hls live streaming, but large playlists (which usually result from the server delivering a dvr playlist rather than a live playlist) will cause performance issues hdmi input you must input the video source using the following uri “tv\ brightsign biz/hdmi” note that you cannot substitute another host url for “brightsign biz” example \<video width="320" height="240" autoplay> \<source src="tv\ brightsign biz/hdmi"> \</video> multiple video elements by default, xt, 4k, and xd players support a maximum of two active \<video> elements at any time (hd/ls models only support one) you can have more than this amount of \<video> elements on a page as long as additional \<video> elements have their src attribute set to an empty string by modifying the src string, you can enable and disable \<video> elements on the page you can enable mosiac mode (using the bsvideomode docid\ chwn7k3a18m3yeukis7qn javascript method) to increase the minimum allowed number of \<video> elements small videos brightsign players do not support videos that are less than 64 pixels in width or height however, a video can be scaled down beyond this limit by making the \<video> element smaller than 64x64 to get the desired downscaling behavior, ensure that the \<video> element does not have the viewmode="scale to fill and crop" attribute view mode in firmware versions 7 0 x and later, hwz video scales to fit the aspect ratio of a \<video> element (i e "scale to fill" ) in earlier versions of firmware, \<video> elements maintain the aspect ratio of the source video (i e "scale to fit" ) this default behavior can be modified using the viewmode attribute; however, we now recommend using standard css methods (e g object fit ) to modify the view mode behavior of a \<video> element viewmode="scale to fill" scales the video to fill the window the aspect ratio of the source video is ignored, so the video may appear stretched viewmode="scale to fit" letterboxes the video viewmode="scale to fill and crop" scales the video to fill the window the aspect ratio of the source video is maintained, so the video may be cropped hwz video html \<video> elements can have an optional “hwz” attribute, which is disabled by default with hwz disabled, video frames are decoded by the dedicated hardware but are routed to the gpu for display with hwz enabled, video frames are instead routed directly to the hardware compositor, bypassing the gpu the choice of whether to enable hwz or not depends on the application and there is no single and obviously right answer some considerations are the gpu is limited to 8 bit color depth if 10 bit video is in use, it must be routed to the hardware video plane in order to retain the full color depth in most cases, the gpu is limited to full hd resolutions if 4k video is in use, it must be routed to the hardware video plane to avoid loss of resolution (even on platforms which can be configured to support 4k graphics, it is unlikely that the gpu will achieve a high enough frame rate for full motion video playback ) the hardware video compositor can perform simple scaling and alpha blending but does not support arbitrary css transforms video with complex css styling must be routed through the gpu in order to display correctly likewise, any video which needs to be captured as a canvas for webgl processing must be routed to the gpu if you want to use css transforms on video, player performance will decrease, since it is based on using hwz rather than the gpu we recommend testing a manipulated hwz video thoroughly before using it in a production environment if video is routed to the gpu, a graphics repaint is required for every frame this consumes a large amount of system bandwidth and may result in stuttery playback if the gpu is not able to keep up with the required frame rate at all times in general, we recommend routing video to the hardware compositor unless there is a specific need for processing by the gpu for most applications, routing video to the hardware compositor can be achieved by setting hwz="z index 1" on the video element in question this causes the compositor to stack the video and graphics layers according to the css z index property you can also enable hwz for all videos in an html widget using one of the following methods brightauthor \ connected select the enable native video playback box in the html5 state docid\ akrm58nds bn6ayhwzrax brightauthor check the enable native video plane playback box in the html5 docid 4tggpysgfv2i18dit81bj state brightscript call sethwzdefault("on") on the rohtmlwidget docid\ xljq5 yhdma2ssmpzimtk instance z ordering hwz video if two video elements are to be routed to the hardware compositor, one of them should be given hwz="z index 2" the one with the lower (more negative) z index will be stacked behind the other (note that in this specific instance the css stacking order is overridden ) alternatively, it is possible to pass a positive z index value in the hwz attribute if this is done, the video elements will be stacked in front of the graphics layer, again overriding the css stacking order, and the one with the higher positive value z index will be in front to route video playback to the gpu, pass hwz="off" or hwz="z index 0" (these are equivalent) the legacy value hwz="on" is equivalent to hwz="z index 1" and should be avoided you can use the css z index property to layer the elements without enabling hwz the layer order shown below is text on top → video in the middle→ image in the back \<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> if hwz is enabled, your css z index property ( style="z index 1") will be overridden add a z index value in the hwz attribute to maintain the correct z ordering positions for all elements \<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> transforming hwz video you can add the optional "transform" parameter to the "hwz" attribute to rotate or mirror the \<video> element the z index parameter must also be specified for the transform to work the "transform" parameter can be assigned the following values identity no transformation (default behavior) rot90 90 degree clockwise rotation rot180 180 degree rotation rot270 270 degree clockwise rotation mirror horizontal mirror transformation mirror rot90 mirrored 90 degree clockwise rotation mirror rot180 mirrored 180 degree clockwise rotation mirror rot270 mirrored 270 degree clockwise rotation multiple hwz video tag extensions are separated with a semicolon a semicolon should also be appended to the final parameter example // video rotated 180 degrees and behind graphics layer \<video src="example movie mp4" hwz="z index 1; transform\ rot180;"> fading hwz video streams the "fade" parameter allows you to control the fading behavior between streaming videos in a \<video> element (this setting does not apply to local video) the "fade" parameter allows you to control the fading behavior between decoded videos in a \<video> element (this setting does not apply to hdmi in) it does not affect audio and will operate independently of rovideoplayer docid\ ztuz0ldazcml2kqmdbkcn the "fade" parameter accepts the following values auto if the video player is currently not showing anything (i e it hasn't played anything yet or the previous loaded video was cleared), the next video will fade in if the video player is currently playing video, is paused, or is stopped without being cleared, the next video will not fade in this is the default behavior always when a video ends, the video window will go black the new video will then fade in never videos transition without fade effects hwz video transparency extensions if "hwz" is enabled for a \<video> element, the video window can also support luma and chroma keys for video transparency the z index parameter must also be specified for transparency to work the luma and chroma keys are specified as follows luma key \[hex value] cr key \[hex value] cb key \[hex value] example this is an example of a video on video layer, in front of graphics layer, with luma keyed video \<video src="example movie mp4" hwz="z index 1; luma key #ff0020;"> how video decoders are selected for playback the system software selects which video decoder to use based on the resolution probed from the video file in standard mode, it will attempt to select the decoder that has the closest maximum supported resolution (i e 1920x1080 for the hd decoder and 3840x2160 for the 4k decoder), without exceeding that maximum resolution if a decoder has been configured for mosaic mode, it will match the video resolution against the specified timeslice mode instead if both decoders support the same maximum resolution, you can select a decoder by matching the z order of the rovideoplayer instance (set using the tofront() and toback() methods) with the z order of the decoder (set using the rovideomode setdecodermode() method) you can also select the decoder manually first, configure the decoder(s) using the rovideomode setdecodermode() method then, use the friendly name specified when calling the method to designate a decoder to use for video playback to select a decoder in brightscript, pass an associative array to the rovideoplayer playfile() method containing the decoder \[friendly name] parameter playfile({filename "text 1 mov", decoder "main video"}) to select a decoder for html video, include the decoder \[friendly name] property with the hwz attribute \<video hwz="decoder\ main video;"> \</video> \<video hwz="decoder\ sd video;"> \</video> the max usage of a decoder determines how many video players can be assigned to the decoder using the system software algorithm described above—video players beyond the max usage limit may be assigned to another decoder or not displayed at all on the other hand, if you manually assign video players using the friendly name of the decoder, you can assign more video players to the decoder than the max usage limit, but this may cause unpredictable video display behavior video decryption the html \<video> tag can be used to decrypt video files and ip streams streaming decryption is currently only supported with the udp protocol and the http protocol (when http is paired with an mpeg2 transport stream) if using a udp multicast mpeg2 transport stream, one of the elemental streams should provide the pcr to the player the \<video> tag supports the encryptionalgorithm and encryptionkey methods encryptionalgorithm the file encryption algorithm the following are the current options "aesctr" the aes algorithm in ctr mode "aesctrhmac" the aes algorithm in ctr mode with hmac "tsaesecb" the aes algorithm in ecb mode (e g with a harmonic prostream) this algorithm is currently used for streaming encryption/decryption "tsaescbcrbt" the aes algorithm in cbc mode with residual block termination this algorithm is used for streaming encryption/decryption encryptionkey a byte array consisting of 128 bits of key if the encryption algorithm is aes ctr or aes ctr hmac, this is followed by 128 bits of iv example (html) \<video src="udp\ //239 192 1 59 5000" encryptionalgorithm="tsaesecb" encryptionkey="01030507090b0d0f00020406080a0c0e"> the video player no longer accepts "{a|a}" aes encryption keys (i e where the top and bottom 64 bits of the key are identical) example (javascript) var player = document getelementbyid("my video player"); player setattribute("encryptionalgorithm", "tsaesecb"); player setattribute("encryptionkey", "01030507090b0d0f00020406080a0c0e"); stream parsing & closed captions the following optional attributes can be included in an html \<video> tag "preferredvideo", "preferredaudio", and "preferredcaptions" if multiple video, audio, or data streams are encapsulated in the video input, these attributes allow you to determine which stream to use for example, if a video may contain english and spanish audio tracks, you can use the "preferredaudio" attribute to specify that the spanish track should be played if it exists, with the video defaulting to english otherwise preferred streams are chosen by matching the supplied text patterns against the textual description of the stream each attribute ("preferredvideo", "preferredaudio", or "preferredcaptions") is a semicolon separated list of templates each template is a comma separated list of patterns each pattern is a \[field name]=\[field value] pair that is matched directly against the stream description video streams each template in a "preferredvideo" attribute can contain the following patterns pid=\[integer] the packet identifier (pid) of the video stream you wish to display program=\[integer] the program number of the video stream codec=\[video codec] the preferred video codec, which can be any of the following mpeg1 mpeg2 mpeg4part2 h263 h264 vc1 h265 width=\[integer] the preferred video width height=\[integer] the preferred video height aspect=\[float(x yy)] the preferred aspect ratio of the video stream as a floating point number with two fractional digits colordepth=\[integer] the preferred color depth of the video example preferredvideo="pid=7680, codec=h264, width=1280, height=720, aspect=1 78, colordepth=8;;" audio streams each template in a "preferredaudio" attribute can contain the following patterns pid=\[integer] the packet identifier (pid) of the audio stream you wish to play program=\[integer] the program number of the audio stream codec=\[audio codec] the preferred audio codec, which can be any of the following mpeg mp3 aac aac plus ac3 ac3 plus dts pcm flac vorbis channels=\[integer] the preferred number of audio channels (from 1 to 8) freq=\[frequency] the preferred sample frequency of the audio track, which can be any of the following 32000 44100 48000 lang=\[language] a code that determines the preferred language of the audio track (e g eng , spa ) the language codes are specified in the iso 639 2 standard type=\[audio type] the preferred audio type, which can be one of the following main audio clean effects hearing impaired visual impaired commentary example preferredaudio="pid=4192, codec=ac3, channels=5, freq=48000, lang=eng, type=main audio;;" subtitle and caption streams the terms "caption," "closed captions," and "closed captioning" are used interchangeably in these documents each template in a "preferredcaption" attribute can contain the following patterns pid=\[integer] the packet identifier (pid) of the caption stream you wish to play type=\[subtitle type] the encoding standard of the subtitles this value can be one of the following cea708 if the cea 708 standard is not present, the subtitle type will default to cea 608 (if it is present) cea608 dvb lang=\[language] a code that determines the preferred language of the subtitles (e g eng , spa ) the language codes are specified in the iso 639 2 standard service=\[integer] the preferred service number of the caption stream example preferredcaptions="pid=0, type=cea708, lang=eng service=1;;" subtitles and captions are rendered on the graphics layer, and hwz must be set to z index 1 or z index 2 to place the video behind the graphics otherwise the subtitles and/or captions will be covered by the video pattern matching behavior note the following when matching templates to stream descriptions for a template to match a stream description, every pattern within the template must match the first listed template to match the stream description (if any) will be used an empty template string will match any stream description all value comparisons are case insensitive numerical values must match the stream description exactly (without leading zeroes) for example, the pattern pid=016 will never match the stream pid value of 16 to indicate logical negation, apply the "!" exclamation mark to the beginning of a pattern for example, specifying preferredvideo="!codec=h265" will match only streams that are not encoded using h 265 apply the ">" greater than symbol before an integer to indicate that, for a successful match, the value in the stream description must be greater than the value following the symbol for example, specifying preferredvideo="width=<1921,height=<1081" will match only videos that are no larger than full hd apply the "<" less than symbol before an integer to indicate that, for a successful match, the value in the stream description must be less than the value following the symbol further examples the following template list contains three patterns lang=eng , lang=spa , and an empty string the first pattern specifies an english language channel; if the english channel does not exist, the second pattern specifies a spanish language channel the third pattern specifies any other channel if the first two don't exist (the empty string matches anything) preferredaudio="lang=eng;lang=spa;;" since the following template list is empty, no captions are specified this can be used to disable captions altogether preferredcaptions="" the following template list contains an empty string template since an empty template matches anything, the first video stream encountered will be played this is the default behavior of all attributes preferredvideo=";" the following template list specifies a 48khz audio stream if there is one; otherwise, no audio stream will be played observe that the list is not terminated with a semicolon; in this case, the semi colon is implicitly supplied preferredaudio="freq=48000" the following template list contains two templates note that all patterns within a template must match the stream description for the entire template to match in this example, an aac encoded english track is preferred; an mp3 encoded english track is designated as the second option; and any track will be chosen if neither template is matched preferredaudio="codec=aac,lang=eng;codec=mp3,lang=eng;;" video track switching the brightsign media playback framework does not support dynamic switching among tracks via html5 video/audio however, it does support querying track information using the tracklist api https //www w3 org/tr/html5/embedded content 0 html#audiotracklist and videotracklist objects the following steps outline how to select tracks using this api create a video element in javascript that is not attached to the dom (i e that is invisible) set the onloadedmetadata event listener set the src of the media url call load() on the html5 video element this will trigger the loadedmetadata event read the track information from the event create a new html5 video player and use the track information to set the preferredaudio , preferredvideo , and preferredsubtitle parameters (described above) call load() / play() on the video element append the video element to the dom when switching from one video to another, it is important to set the video source to be blank to release the video element, otherwise the first video(s) will continue to use memory while subsequent videos are playing see line 12 in the code example below example \<!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> audio routing \<audio>/\<video> elements brightsign players have unique audio attributes for \<audio>/\<video> elements these allow you to control how the audio is routed through the player outputs pcmaudio pcm audio compaudio compressed audio multiaudio multi channel audio each attribute can be passed the following values, which determine where the audio will be routed “none” "hdmi” or "hdmi 1" , "hdmi 2" , "hdmi 3" , or "hdmi 4 " for series 5 players with multiple outputs “usb” “spdif” "analog" “analog\ n” (n specifies the port enumeration, which is useful for models with multiple analog audio ports; you can also use "analog 1" to specify the analog output on a model with a single analog audio port) if you don’t assign any audio attributes to an \<audio>/\<video> element, then the audio will be routed to all audio outputs, along with any other audio that is currently playing example 1 \<video src="example movie mp4" width="512" height="400" pcmaudio="hdmi" autoplay> your browser does not support the video tag \</video> example 2 \<video src="example movie mp4" width="512" height="400" compaudio="hdmi;usb" autoplay> your browser does not support the video tag \</video> html video timecode playback brightsign precision for html video timecode playback is 200ms chroma keying brightsign chroma key settings consist of a mask, and a minimum and maximum value the minimum and maximum are the most important values since the mask is really only useful for “special effects” each pixel of every frame is checked to see if it is between the minimum and maximum values and if it is, the pixel is set to fully transparent if it is outside the range, the pixel is fully opaque this means you will have a hard edge, not a gradual fade, where the video goes from opaque to transparent chroma key tips to get better chroma keying, do not anti alias any pixels that should be transparent you will then be able to target a single transparency color rather than a range if your video is compressed, the chroma is sub sampled, so there will be edges where the chroma will end up as an intermediate value between green and the frame color cgi animations with green holes often have anti aliasing which will result in a fade of green around edges you may be able to chroma keyed out these edges with the values shown in the examples below (in these examples, v is an html video docid\ e6ujleh69q0jmmv8kytrp object) the easiest color to remove from content is black which has a luma value of 0, because the video has sub sampled chroma (4 2 0 rather than 4 4 4) using luma keying means that every pixel can be accurately keyed white is luma 240 (it's not quite a full range 8 bit value), but the chroma can mean that it contains many other bright colors, so it's hard to just remove white arbitrary colors are hard to deal with, as they involve specifying a small range of chroma values which must be calculated the color to be removed has to be calculated in ycbcr, and the cb and cr values are used for the chroma keying if the source is cgi then the range used can be very tight since a single color is made transparent if the video source was live footage shot against a green screen, then the range needs to be much wider to accommodate the range of green colors in the video examples lower chroma key values here the cr range is 0 32 and the cb range is 0 48 this may leave a green halo around areas that were blended to give a smoother look since chroma keying can't do smooth transitions v setkeyingvalue({cr \&hff2000, cb \&hff3000}) higher chroma key values this example covers a much larger range of colors v setkeyingvalue({cr \&hff7000, cb \&hff7000})