-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
21 lines (17 loc) · 12.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>@svta/common-media-library</title><meta name="description" content="Documentation for @svta/common-media-library"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/icons.js" id="tsd-icons-script"></script><script async src="assets/search.js" id="tsd-search-script"></script><script async src="assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base="."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">@svta/common-media-library</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h1>@svta/common-media-library</h1></div><div class="tsd-panel tsd-typography"><a id="md:common-media-library" class="tsd-anchor"></a><h1 class="tsd-anchor-link">common-media-library<a href="#md:common-media-library" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h1><p>A common library for media playback in JavaScript</p>
<p>Looking at open source players like <a href="https://github.com/video-dev/hls.js/" target="_blank" class="external">hls.js</a>, <a href="https://github.com/Dash-Industry-Forum/dash.js/" target="_blank" class="external">dash.js</a>, and <a href="https://github.com/shaka-project/shaka-player" target="_blank" class="external">shaka-player</a> there are common pieces of functionality that have been implemented independently across the libraries. This is particularly true when looking at standards based features, like ID3 parsing, 608 parsing and CMCD. Since the functionality is shared in spirit but not implementation, they can fall out of sync where certain bugs are fixed in one player but not the others. The goal of this library is to create a single place where these utilities can be maintained and distributed.</p>
<a id="md:project-structure" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Project structure<a href="#md:project-structure" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>This project is a mono-repo with the following workspaces: <code>lib</code>, <code>docs</code>. The <code>lib</code> package contains the compiled code for the library which is published to npm. The <code>docs</code> package contains the documentation for the library and is published to GitHub pages.</p>
<a id="md:installation" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Installation<a href="#md:installation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><pre><code class="bash"><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-2">install</span><span class="hl-1"> </span><span class="hl-2">@svta/common-media-library</span>
</code><button type="button">Copy</button></pre>
<a id="md:usage" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Usage<a href="#md:usage" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Too ensure the smallest bundle sizes possible, it is best practice to import all members and type definitions
individually from the library.</p>
<pre><code class="typescript"><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-4">appendCmcdQuery</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">'@svta/common-media-library/cmcd/appendCmcdQuery'</span><span class="hl-1">;</span><br/><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-4">CmcdObjectType</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">'@svta/common-media-library/cmcd/CmcdObjectType'</span><span class="hl-1">;</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">cmcd</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-4">sid:</span><span class="hl-1"> </span><span class="hl-2">'4f2867f2-b0fd-4db7-a3e0-cea7dff44cfb'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">cid:</span><span class="hl-1"> </span><span class="hl-2">'cc002fc3-d9e1-418d-9a5f-3d0eac601882'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">d:</span><span class="hl-1"> </span><span class="hl-7">324.69</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">ot:</span><span class="hl-1"> </span><span class="hl-4">CmcdObjectType</span><span class="hl-1">.</span><span class="hl-6">MANIFEST</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">[</span><span class="hl-2">'com.example-hello'</span><span class="hl-4">]:</span><span class="hl-1"> </span><span class="hl-2">'world'</span><span class="hl-1">,</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">cmcdUrl</span><span class="hl-1"> = </span><span class="hl-0">appendCmcdQuery</span><span class="hl-1">(</span><span class="hl-2">'https://example.com/playlist.m3u8'</span><span class="hl-1">, </span><span class="hl-4">cmcd</span><span class="hl-1">);</span><br/><span class="hl-4">console</span><span class="hl-1">.</span><span class="hl-0">log</span><span class="hl-1">(</span><span class="hl-4">cmcdUrl</span><span class="hl-1">);</span><br/><span class="hl-8">// https://example.com/playlist.m3u8?CMCD=cid%3D%22cc002fc3-d9e1-418d-9a5f-3d0eac601882%22%2Ccom.example-hello%3D%22world%22%2Cd%3D325%2Cot%3Dm%2Csid%3D%224f2867f2-b0fd-4db7-a3e0-cea7dff44cfb%22</span>
</code><button type="button">Copy</button></pre>
<p>If bundle size isn't a concern, all members and type definitions can also be imported from the root of the library, or from the feature namespace.</p>
<pre><code class="typescript"><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-4">appendCmcdQuery</span><span class="hl-1">, </span><span class="hl-4">CmcdObjectType</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">'@svta/common-media-library'</span><span class="hl-1">;</span>
</code><button type="button">Copy</button></pre>
<pre><code class="typescript"><span class="hl-3">import</span><span class="hl-1"> { </span><span class="hl-4">appendCmcdQuery</span><span class="hl-1">, </span><span class="hl-4">CmcdObjectType</span><span class="hl-1"> } </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-2">'@svta/common-media-library/cmcd'</span><span class="hl-1">;</span>
</code><button type="button">Copy</button></pre>
<a id="md:documentation" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Documentation<a href="#md:documentation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>API docs can be found <a href="https://streaming-video-technology-alliance.github.io/common-media-library/" target="_blank" class="external">here</a>.</p>
<a id="md:thanks" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Thanks<a href="#md:thanks" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>This project builds upon the work of the open source community. Special thanks to the maintainers of <a href="https://github.com/video-dev/hls.js/" target="_blank" class="external">hls.js</a>, <a href="https://github.com/dash-industry-forum/dash.js/" target="_blank" class="external">dash.js</a>, <a href="https://github.com/shaka-project/shaka-player" target="_blank" class="external">shaka-player</a>, and <a href="https://github.com/Jxck/structured-field-values" target="_blank" class="external">structured-field-values</a> as well as organizations like the <a href="https://www.svta.org/" target="_blank" class="external">Streaming Video Technology Alliance</a>, <a href="https://dashif.org/" target="_blank" class="external">DASH Industry Forum</a>, and the <a href="https://www.cta.tech/Resources/Standards/WAVE-Project" target="_blank" class="external">CTA WAVE Project</a>.</p>
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#md:common-media-library"><span>common-<wbr/>media-<wbr/>library</span></a><ul><li><a href="#md:project-structure"><span>Project structure</span></a></li><li><a href="#md:installation"><span>Installation</span></a></li><li><a href="#md:usage"><span>Usage</span></a></li><li><a href="#md:documentation"><span>Documentation</span></a></li><li><a href="#md:thanks"><span>Thanks</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html" class="current"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="assets/icons.svg#icon-1"></use></svg><span>@svta/common-media-library</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base="."><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html>