...
Table of Contents |
---|
Example of stream convertion to HLS and playing it in browser using VideoJS
The player shows how to convert stream published on WCS server to HLS and play it in browser. HLS stream cut starts automatically when strea is requested by HLS URL, for example httpsexample http://demo.flashphoner.com:8445localhost:8082/test/test.m3u8 on the screenshot below
The code of the example
The source code can be accessed on server by the following path:
...
Where host is WCS server address
Analyzing the code
...
Toanalize To analize the code get hls-player.js file version with hash 51703a2 ecbadc3, which is available available here and can be downloaded in build build 2.0.5.28.2753.141212.
1. A server HLS URL detection
getHLSUrl() code
Code Block | ||||
---|---|---|---|---|
| ||||
function initPage() { $("#header").text("HLS VideoJS Player Minimal"); $("#urlServer").val(getHLSUrl()); ... } |
2. Player initialization
videojs() code
A div element for stream playback is passed to player
...
3. Stream name detection (the stream should be published to server)
encodeURIComponent() code
Code Block | ||||
---|---|---|---|---|
| ||||
function playBtnClick() { if (validateForm()) { var streamName = $('#playStream').val(); streamName = encodeURIComponent(streamName); ... } } |
4. HLS stream URL forming and player launching
player.play() code
If authentication key and token are set, they will be inclueded included to stream URL
Code Block | ||||
---|---|---|---|---|
| ||||
function playBtnClick() { if (validateForm()) { ... var videoSrc = $("#urlServer").val() + '/' + streamName + '/' + streamName + '.m3u8'; var key = $('#key').val(); var token = $("#token").val(); if (key.length > 0 && token.length > 0) { videoSrc += "?" + key + "=" + token; } player.src({ src: videoSrc, type: "application/vnd.apple.mpegurl" }); console.log("Play with VideoJs"); player.play(); onStarted(); } } |
5. Playback stopping
player.pausedispose() code
This method removes the div container tag where player was initialized from the page
Code Block | ||||
---|---|---|---|---|
| ||||
function stopBtnClick() {
if (player != null) {
console.log("Stop VideoJS player");
player.pause();
}
onStopped();
} |
6. New div contaioner tag creation after previous player was removed
Code Block | ||||
---|---|---|---|---|
| ||||
function createRemoteVideo(parent) { remoteVideo = document.createElement("video"); remoteVideo.id = "remoteVideo"; remoteVideo.width=852; remoteVideo.height=480; remoteVideo.controls="controls"; remoteVideo.autoplay="autoplay"; remoteVideo.type="application/vnd.apple.mpegurl"; remoteVideo.className = "video-js vjs-default-skin"; parent.appendChild(remoteVideo); player = videojs(remoteVideo); } |