This repository has been archived by the owner on Jan 16, 2023. It is now read-only.
forked from Dash-Industry-Forum/dash.js
/
multi-track-captions.html
91 lines (81 loc) · 4.17 KB
/
multi-track-captions.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Multiple Language Timed Text Sample</title>
<meta name="description" content="" />
<link rel="stylesheet" href="../../contrib/akamai/controlbar/controlbar.css">
<script src="../../contrib/akamai/controlbar/ControlBar.js"></script>
<script src="../../dist/dash.all.debug.js"></script>
<!--dash.all.min.js should be used in production over dash.all.debug.js
Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
<!--<script src="../../dist/dash.all.min.js"></script>-->
<script class="code">
var EXTERNAL_CAPTION_URL = "https://dash.akamaized.net/dash264/TestCases/4b/qualcomm/1/ED_OnDemand_5SecSeg_Subtitles.mpd", // need to manually seek to get stream to start... issue with MPD but only sample with multi adaptations for external sidecar caption text xml
FRAGMENTED_CAPTION_URL = "https://vm2.dashif.org/dash/vod/testpic_2s/multi_subs.mpd",
videoElement,
controlbar,
player;
function startVideo() {
var url = FRAGMENTED_CAPTION_URL,
TTMLRenderingDiv;
videoElement = document.querySelector(".videoContainer video");
TTMLRenderingDiv = document.querySelector("#ttml-rendering-div");
player = dashjs.MediaPlayer().create();
player.initialize(videoElement, url, true);
player.setTextDefaultEnabled(true);
player.setInitialMediaSettingsFor('fragmentedText', {
lang: 'swe'
});
player.attachTTMLRenderingDiv(TTMLRenderingDiv);
controlbar = new ControlBar(player); // Checkout ControlBar.js for more info on how to target/add text tracks to UI
controlbar.initialize();
}
</script>
<style>
video {
width: 100%;
}
.dash-video-player {
width: 640px;
}
</style>
<body onload="startVideo()">
<div class="dash-video-player code">
<div class="videoContainer" id="videoContainer">
<video preload="auto" autoplay="true" > </video>
<div id="ttml-rendering-div"></div>
<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>
<script src="../highlighter.js"></script>
</body>
</html>