Skip to content

Commit

Permalink
Add examples for the different builds and rename ESM build
Browse files Browse the repository at this point in the history
  • Loading branch information
@dsilhavy
dsilhavy committed Jan 15, 2025
1 parent 0ca325c commit b8a3c1a
Show file tree
Hide file tree
Showing 7 changed files with 1,106 additions and 893 deletions.
4 changes: 2 additions & 2 deletions build/webpack/common/webpack.common.prod.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,15 @@ const configCommonDebugProdEsm = {
mode: 'development',
entry: prodEntries,
output: {
filename: '[name].debug.esm.js'
filename: '[name].debug.js'
}
};

const configCommonMinProdEsm = {
mode: 'production',
entry: prodEntries,
output: {
filename: '[name].min.esm.js'
filename: '[name].min.js'
},
optimization: {
usedExports: false,
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
"exports": {
".": {
"types": "./index.d.ts",
"import": "./dist/modern/esm/dash.all.min.esm.js",
"default": "./dist/modern/esm/dash.all.min.esm.js",
"import": "./dist/modern/esm/dash.all.min.js",
"default": "./dist/modern/esm/dash.all.min.js",
"browser": "./dist/modern/umd/dash.all.min.js",
"script": "./dist/modern/umd/dash.all.min.js"
}
Expand Down
60 changes: 60 additions & 0 deletions samples/builds/esm-browserlist.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ESM Browserlist Build Example</title>

<!-- Bootstrap core CSS -->
<link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="../lib/main.css" rel="stylesheet">

<style>
video {
width: 640px;
height: 360px;
}
</style>
</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-100 p-5 bg-light border rounded-3">
<h3>ECMAScript Module Build Example</h3>
<p>This sample page uses the modern ECMAScript Module build that is targeting a "browserlist" with the value set to
"default". There are no polyfills added to the build.</p>
</div>
</div>
<div class="col-md-8">
<div class="code">
<video autoplay preload="none" controls="true">
</video>
</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">
&copy; DASH-IF
</footer>
</div>
</main>
<script class="code" type="module">
import { MediaPlayer } from '../../dist/modern/esm/dash.all.min.js';

const player = MediaPlayer().create();
player.initialize(document.querySelector('video'), 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd', true);
</script>
<script src="../highlighter.js"></script>
</body>
</html>
58 changes: 58 additions & 0 deletions samples/builds/umd-browserlist.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Universal Module Definition Build - Browserlist</title>

<script class="code" src="../../dist/modern/umd/dash.all.min.js"></script>

<!-- Bootstrap core CSS -->
<link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="../lib/main.css" rel="stylesheet">

<style>
video {
width: 640px;
height: 360px;
}
</style>
</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-100 p-5 bg-light border rounded-3">
<h3>Universal Module Definition (UMD) Build - Browserlist</h3>
<p>This sample page uses the modern UMD build that is targeting a "browserlist" with the value set to
"default". There are no polyfills added to the build.</p>
</div>
</div>
<div class="col-md-8">
<div class="code">
<video autoplay preload="none" controls="true">
<source src="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd"
type="application/dash+xml"/>
</video>
</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">
&copy; DASH-IF
</footer>
</div>
</main>
<script src="../highlighter.js"></script>
</body>
</html>
57 changes: 57 additions & 0 deletions samples/builds/umd-es5.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Universal Module Definition Build - ES5</title>

<script class="code" src="../../dist/legacy/umd/dash.all.min.js"></script>

<!-- Bootstrap core CSS -->
<link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="../lib/main.css" rel="stylesheet">

<style>
video {
width: 640px;
height: 360px;
}
</style>
</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-100 p-5 bg-light border rounded-3">
<h3>Universal Module Definition (UMD) Build - ES5</h3>
<p>This sample page uses the legacy build that is transpiled to ES5 with missing functionality being polyfilled with corejs. The Babel target for the build is IE11.</p>
</div>
</div>
<div class="col-md-8">
<div class="code">
<video autoplay preload="none" controls="true">
<source src="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd"
type="application/dash+xml"/>
</video>
</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">
&copy; DASH-IF
</footer>
</div>
</main>
<script src="../highlighter.js"></script>
</body>
</html>
Loading

0 comments on commit b8a3c1a

Please sign in to comment.