Skip to content

Commit

Permalink
Feature/preload (#4108)
Browse files Browse the repository at this point in the history 
* First working preload demo

* Support for preloading streams with texttracks

* Fix unit test

* Use promise returned by setMediaSource

* Add preload example to sample section

* Check for StreamProcessor in createBufferSinkForText to avoid error message if no texttrack is available

* Remove unrelated changes

* Remove unrelated change in Constants.js
  • Loading branch information
@dsilhavy
dsilhavy committed Jan 17, 2023
1 parent 9696b40 commit ce8d6b0
Show file tree
Hide file tree
Showing 11 changed files with 415 additions and 66 deletions.
143 changes: 143 additions & 0 deletions samples/advanced/preload.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Preload example</title>
<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 rel="stylesheet" href="../../contrib/akamai/controlbar/controlbar.css">
<link href="../lib/main.css" rel="stylesheet">

<style>
video {
width: 100%;
}

.dash-video-player {
position: relative; /* This position relative is needed to position the menus */
margin: 0 auto;
line-height: 1.0;
}
</style>

<script class="code">
var video,
player,
ttmlRenderingDiv;

function init() {
var url = 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd';

player = dashjs.MediaPlayer().create();
player.initialize(null, url, true);
player.updateSettings({
debug: {logLevel: 5},
streaming: {cacheInitSegments: true}
});
player.preload();
}

function attachVideoPlayer() {
if (!video) {
video = document.getElementById('video-element')
}

player.attachView(video);
ttmlRenderingDiv = document.querySelector('#ttml-rendering-div');
player.attachTTMLRenderingDiv(ttmlRenderingDiv);
var 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"
alt="dashjs logo"
width="200">
</header>
<div class="row">
<div class="col-md-4">
<div class="h-100 p-5 bg-light border rounded-3">
<h3>Preload content</h3>
<p>This example shows how to use preload feature of dash.js, which allows to initialize streaming
and start downloading the content before the player is attached to an HTML5 video element. This
feature can be used to optimize content-insertion on platforms which provide only a single
decoder.</p>
<p>When this page is loaded, dash.js downloads media segments into a virtual buffer. Once the
"Attach View" button is clicked, a video element is attached to dash.js and the downloaded data
will be appended to the newly created
Source Buffers.</p>
<p>Note that for this feature to work "cacheInitSegments" must be activated.</p>
</div>
</div>
<div class="col-md-8">
<div class="dash-video-player code">
<div class="videoContainer" id="videoContainer">
<video id="video-element"></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>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button onclick="attachVideoPlayer()">Attach View</button>
</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">
&copy; DASH-IF
</footer>
</div>
</main>


<script>
document.addEventListener('DOMContentLoaded', function () {
init();
});
</script>
<script src="../highlighter.js"></script>
</body>
</html>
11 changes: 11 additions & 0 deletions samples/samples.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -728,6 +728,17 @@
"Video",
"Audio"
]
},
{
"title": "Preload content",
"description": "This example shows how to use preload feature of dash.js, which allows to initialize streaming and start downloading the content before the player is attached to an HTML5 video element. This feature can be used to optimize content-insertion on platforms which provide only a single decoder.",
"href": "advanced/preload.html",
"image": "lib/img/livesim-1.jpg",
"labels": [
"VoD",
"Video",
"Audio"
]
}
]
},
Expand Down
23 changes: 23 additions & 0 deletions src/streaming/MediaPlayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -521,6 +521,28 @@ function MediaPlayer() {
---------------------------------------------------------------------------
*/

/**
* Causes the player to begin streaming the media as set by the {@link module:MediaPlayer#attachSource attachSource()}
* method in preparation for playing. It specifically does not require a view to be attached with {@link module:MediaPlayer#attachSource attachView()} to begin preloading.
* When a view is attached after preloading, the buffered data is transferred to the attached mediaSource buffers.
*
* @see {@link module:MediaPlayer#attachSource attachSource()}
* @see {@link module:MediaPlayer#attachView attachView()}
* @memberof module:MediaPlayer
* @throws {@link module:MediaPlayer~SOURCE_NOT_ATTACHED_ERROR SOURCE_NOT_ATTACHED_ERROR} if called before attachSource function
* @instance
*/
function preload() {
if (videoModel.getElement() || streamingInitialized) {
return false;
}
if (source) {
_initializePlayback();
} else {
throw SOURCE_NOT_ATTACHED_ERROR;
}
}

/**
* The play method initiates playback of the media defined by the {@link module:MediaPlayer#attachSource attachSource()} method.
* This method will call play on the native Video Element.
Expand Down Expand Up @@ -2380,6 +2402,7 @@ function MediaPlayer() {
attachView,
attachSource,
isReady,
preload,
play,
isPaused,
pause,
Expand Down
23 changes: 13 additions & 10 deletions src/streaming/PreBufferSink.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,14 +75,17 @@ function PreBufferSink(onAppendedCallback) {
chunk: chunk
});
}
return Promise.resolve();
}

function remove(start, end) {
chunks = chunks.filter(a => !((isNaN(end) || a.start < end) && (isNaN(start) || a.end > start))); //The opposite of the getChunks predicate.
return Promise.resolve();
}

//Nothing async, nothing to abort.
function abort() {
return Promise.resolve();
}

function getAllBufferRanges() {
Expand Down Expand Up @@ -117,7 +120,7 @@ function PreBufferSink(onAppendedCallback) {
}

function updateTimestampOffset() {
// Nothing to do
return Promise.resolve();
}

function getBuffer() {
Expand Down Expand Up @@ -154,15 +157,15 @@ function PreBufferSink(onAppendedCallback) {
}

instance = {
getAllBufferRanges: getAllBufferRanges,
append: append,
remove: remove,
abort: abort,
discharge: discharge,
reset: reset,
updateTimestampOffset: updateTimestampOffset,
waitForUpdateEnd: waitForUpdateEnd,
getBuffer: getBuffer
getAllBufferRanges,
append,
remove,
abort,
discharge,
reset,
updateTimestampOffset,
waitForUpdateEnd,
getBuffer
};

setup();
Expand Down

0 comments on commit ce8d6b0

Please sign in to comment.