Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/preload #4108

Merged
merged 10 commits into from
Jan 17, 2023
Merged

Feature/preload #4108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3ccd759
First working preload demo
dsilhavy Dec 26, 2022
4075523
Support for preloading streams with texttracks
dsilhavy Dec 26, 2022
615ba56
Fix unit test
dsilhavy Dec 26, 2022
a1f76b1
Use promise returned by setMediaSource
dsilhavy Dec 26, 2022
dc4008e
Add preload example to sample section
dsilhavy Dec 26, 2022
d2a86f7
Merge remote-tracking branch 'origin/development' into feature/preload
dsilhavy Jan 9, 2023
955bc9e
Check for StreamProcessor in createBufferSinkForText to avoid error m…
dsilhavy Jan 9, 2023
ae7c354
Remove unrelated changes
dsilhavy Jan 10, 2023
3909642
Merge remote-tracking branch 'origin/development' into feature/preload
dsilhavy Jan 17, 2023
e331de2
Remove unrelated change in Constants.js
dsilhavy Jan 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 143 additions & 0 deletions samples/advanced/preload.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading