blob: 7129b30a0cae0e975ed3bf3b1c7f209b9b5bdea7 (
plain)
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
|
<script type="text/javascript" src="<?=h($assets)?>dashjs/dash.all.debug.js"></script>
<script type="text/javascript" src="<?=h($assets)?>dashjs/ControlBar.js"></script>
<link type="text/css" rel="stylesheet" href="<?=h($assets)?>dashjs/controlbar.css" />
<div class="dashContainer">
<!-- working example: src="http://dash.edgesuite.net/envivio/EnvivioDash3/manifest.mpd" -->
<video
preload="auto" autoplay="true"
src="<?=h($room->getDashManifestUrl())?>"
style="width: 100%"
>
<div class="well">DASH does not seem to work for you. Sorry :/</div>
</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">
<input type="range" id="seekbar" value="0" class="seekbar" min="0" step="0.01"/>
</div>
</div>
</div>
<!--
this is an experimental hack, trying to protect the remaining page from
interference with the new dash-player.
-->
<script type="text/javascript">
$(function() {
var $videoElement = $(".dashContainer video");
var player = dashjs.MediaPlayer().create();
player.initialize(
$videoElement.get(0),
$videoElement.prop('src'),
true
);
var controlbar = new ControlBar(player);
controlbar.initialize();
});
</script>
<style type="text/css">
.dashContainer video {
display: block;
}
.dashContainer {
line-height: 1;
}
.dashContainer .volumebar {
width: 70px;
}
body.room .player-wrap.tab-content {
padding: 0;
}
</style>
|
