| Expand | ||
|---|---|---|
| ||
|
...
| Code Block |
|---|
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.
...
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
| Code Block |
|---|
// 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;"> |
...
Create a video element in JavaScript that is not attached to the DOM (i.e. that is invisible).
Set the
onloadedmetadataevent listener.Set the
srcof the media URL.Call
load()on the HTML5 video element. This will trigger theloadedmetadataevent.Read the track information from the event.
Create a new HTML5 video player and use the track information to set the
preferredAudio,preferredVideo, andpreferredSubtitleparameters (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
| Code Block | ||
|---|---|---|
| ||
<!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 releasea thenew video element.
video = document.createElement('video'); // create a
new video element.
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> |
...