Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added subtitle event handling for manual rendering the subtitles (#4360)
* Added subtitle event handling for manual rendering the subtitles This adds two new media player events: `CUE_ENTER` and `CUE_EXIT`. With these events you can render the subtitles without relying on the browser. This makes it possible to fully customize the UI for the subtitles. To enable the events, set the `fireCueEvents` setting to true. For details check out the example in `samples/captioning/events.html`.
- Loading branch information
Showing
7 changed files
with
380 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,216 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Captions Event Sample</title> | ||
| <script src="../../contrib/videojs-vtt.js/vtt.min.js"></script> | ||
| <script | ||
| class="code" | ||
| src="../../contrib/akamai/controlbar/ControlBar.js" | ||
| ></script> | ||
| <script src="../../dist/dash.all.debug.js"></script> | ||
|
|
||
| <!-- Bootstrap core CSS --> | ||
| <link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet" /> | ||
| <link href="../lib/main.css" rel="stylesheet" /> | ||
|
|
||
| <link | ||
| rel="stylesheet" | ||
| href="../../contrib/akamai/controlbar/controlbar.css" | ||
| /> | ||
|
|
||
| <style> | ||
| video { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .dash-video-player { | ||
| position: relative; /* This position relative is needed to position the menus */ | ||
| margin: 0 auto; | ||
| line-height: 1; | ||
| } | ||
| </style> | ||
|
|
||
| <script class="code"> | ||
| var CAPTION_URL = | ||
| "https://dash.akamaized.net/akamai/test/caption_test/ElephantsDream/elephants_dream_480p_heaac5_1_https.mpd", | ||
| video, | ||
| player; | ||
|
|
||
| function init() { | ||
| var url = CAPTION_URL, | ||
|
|
||
| video = document.querySelector("video"); | ||
|
|
||
| player = dashjs.MediaPlayer().create(); | ||
| player.updateSettings({ | ||
| streaming: { | ||
| text: { | ||
| dispatchForManualRendering: true, | ||
| webvtt: { | ||
| customRenderingEnabled: true | ||
| } | ||
| } | ||
| } | ||
| }) | ||
| player.initialize(video, url, true); | ||
|
|
||
| player.on("playbackPaused", function (e) { | ||
| console.log("playbackPaused"); | ||
| }); | ||
| player.on("cueEnter", function (e) { | ||
| console.log("cueEnter", e); | ||
| const subtitle = document.createElement("p") | ||
| subtitle.setAttribute("id", "subtitle-" + e.cueID) | ||
| subtitle.innerHTML = e.text; | ||
| document.getElementById("subtitles").appendChild(subtitle); | ||
| }); | ||
| player.on("cueExit", function (e) { | ||
| console.log("cueExit ", e); | ||
| document.getElementById("subtitle-" + e.cueID).remove(); | ||
| }); | ||
|
|
||
| controlbar = new ControlBar(player); | ||
| controlbar.initialize(); | ||
| } | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <main> | ||
| <div class="container py-4"> | ||
| <header class="pb-3 mb-4 border-bottom"> | ||
| <img | ||
| class="" | ||
| src="../lib/img/dashjs-logo.png" | ||
| width="200" | ||
| /> | ||
| </header> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div class="h-50 p-5 bg-light border rounded-3"> | ||
| <h3>Subtitle Event Handling</h3> | ||
| <p> | ||
| Example showing how to consume subtitle events raised by | ||
| dash.js. This way you can render the subtitles yourself. | ||
| </p> | ||
| </div> | ||
| <div class="h-45 mt-5 p-5 bg-light border rounded-3"> | ||
| <h4>Current Subtitle</h4> | ||
| <div id="subtitles"> | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="col-md-8"> | ||
| <div class="dash-video-player code"> | ||
| <div class="videoContainer" id="videoContainer"> | ||
| <video preload="auto" autoplay></video> | ||
| <div | ||
| id="videoController" | ||
| class="video-controller unselectable" | ||
| > | ||
| <div | ||
| id="playPauseBtn" | ||
| class="btn-play-pause" | ||
| title="Play/Pause" | ||
| > | ||
| <span | ||
| id="iconPlayPause" | ||
| class="icon-play" | ||
| ></span> | ||
| </div> | ||
| <span id="videoTime" class="time-display" | ||
| >00:00:00</span | ||
| > | ||
| <div | ||
| id="fullscreenBtn" | ||
| class="btn-fullscreen control-icon-layout" | ||
| title="Fullscreen" | ||
| > | ||
| <span | ||
| class="icon-fullscreen-enter" | ||
| ></span> | ||
| </div> | ||
| <div | ||
| id="bitrateListBtn" | ||
| class="control-icon-layout" | ||
| title="Bitrate List" | ||
| > | ||
| <span class="icon-bitrate"></span> | ||
| </div> | ||
| <input | ||
| type="range" | ||
| id="volumebar" | ||
| class="volumebar" | ||
| value="1" | ||
| min="0" | ||
| max="1" | ||
| step=".01" | ||
| /> | ||
| <div | ||
| id="muteBtn" | ||
| class="btn-mute control-icon-layout" | ||
| title="Mute" | ||
| > | ||
| <span | ||
| id="iconMute" | ||
| class="icon-mute-off" | ||
| ></span> | ||
| </div> | ||
| <div | ||
| id="trackSwitchBtn" | ||
| class="control-icon-layout" | ||
| title="A/V Tracks" | ||
| > | ||
| <span class="icon-tracks"></span> | ||
| </div> | ||
| <div | ||
| id="captionBtn" | ||
| class="btn-caption control-icon-layout" | ||
| title="Closed Caption" | ||
| > | ||
| <span class="icon-caption"></span> | ||
| </div> | ||
| <span | ||
| id="videoDuration" | ||
| class="duration-display" | ||
| >00:00:00</span | ||
| > | ||
| <div class="seekContainer"> | ||
| <div | ||
| id="seekbar" | ||
| class="seekbar seekbar-complete" | ||
| > | ||
| <div | ||
| id="seekbar-buffer" | ||
| class="seekbar seekbar-buffer" | ||
| ></div> | ||
| <div | ||
| id="seekbar-play" | ||
| class="seekbar seekbar-play" | ||
| ></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="col-md-12"> | ||
| <div id="code-output"></div> | ||
| </div> | ||
| </div> | ||
| <footer class="pt-3 mt-4 text-muted border-top"> | ||
| © DASH-IF | ||
| </footer> | ||
| </div> | ||
| </main> | ||
| <script> | ||
| document.addEventListener("DOMContentLoaded", function () { | ||
| init(); | ||
| }); | ||
| </script> | ||
| <script src="../highlighter.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.