chore: example update

shiyiya · Mar 15, 2024 · 51daed2 · 51daed2
1 parent 94e2a79
commit 51daed2
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@
 
 - https://oplayer.vercel.app
 - https://ohplayer.netlify.app
-- [Standalone Demo](https://oplayer.vercel.app/ohls.html?src=https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8)
+- [Standalone Demo](https://oplayer.vercel.app/ohls.html?playlist=%5B%7B"title"%3A"Disney%27s+Oceans+-+MP4"%2C"src"%3A"%2F%2Fvjs.zencdn.net%2Fv%2Foceans.mp4"%2C"poster"%3A"%2F%2Fvjs.zencdn.net%2Fv%2Foceans.png"%2C"duration"%3A"00%3A46"%7D%2C%7B"title"%3A"Big+Buck+Bunny+-+HLS"%2C"src"%3A"https%3A%2F%2Ftest-streams.mux.dev%2Fx36xhzz%2Fx36xhzz.m3u8"%2C"poster"%3A"https%3A%2F%2Fd2zihajmogu5jn.cloudfront.net%2Fbig-buck-bunny%2Fbbb.png"%2C"duration"%3A"10%3A34"%7D%2C%7B"title"%3A"Big+Buck+Bunny+-+DASH"%2C"src"%3A"https%3A%2F%2Fdash.akamaized.net%2Fakamai%2Fbbb_30fps%2Fbbb_30fps.mpd"%2C"poster"%3A"https%3A%2F%2Fd2zihajmogu5jn.cloudfront.net%2Fbig-buck-bunny%2Fbbb.png"%2C"duration"%3A"10%3A34"%7D%5D)
 
 ## Who use OPlayer?
 

diff --git a/examples/standalone/main.ts b/examples/standalone/main.ts
@@ -144,14 +144,22 @@ const player = Player.make<Ctx>('#player', {
           src: '//',
           duration: '00:00'
         },
+        {
+          title: "Disney's Oceans - MP4",
+          src: '//vjs.zencdn.net/v/oceans.mp4',
+          poster: '//vjs.zencdn.net/v/oceans.png',
+          duration: '00:46'
+        },
         {
           title: 'Big Buck Bunny - HLS',
           src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+          poster: 'https://d2zihajmogu5jn.cloudfront.net/big-buck-bunny/bbb.png',
           duration: '10:34'
         },
         {
-          title: 'DASH',
+          title: 'Big Buck Bunny - DASH',
           src: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
+          poster: 'https://d2zihajmogu5jn.cloudfront.net/big-buck-bunny/bbb.png',
           duration: '10:34'
         },
         {
@@ -191,13 +199,14 @@ function stopLoad() {
 
 let src: string = player.context.playlist.options.sources[initialIndex].src
 
-const actions = () => html`<p style="display:flex;">
-  <input type="text" @input=${(e: any) => (src = e.target.value)} style="width:100%;" .value=${live(src)} />
+const actions = () =>
+  html`<p style="display:flex;">
+    <input type="text" @input=${(e: any) => (src = e.target.value)} style="width:100%;" .value=${live(src)} />
 
-  <button @click=${() => player.changeSource({ src })}>Load</button>
+    <button @click=${() => player.changeSource({ src })}>Load</button>
 
-  <button @click=${stopLoad}>StopLoad</button>
-</p> `
+    <button @click=${stopLoad}>StopLoad</button>
+  </p> `
 
 render(actions(), document.getElementById('actions')!)
 

diff --git a/packages/docs/public/ohls.html b/packages/docs/public/ohls.html
@@ -126,7 +126,7 @@
             builder({
               ...e,
               message:
-                e.message + '\n' + 'Open an issues https://github.com/shiyiya/oplayer/issues/new/choose'
+                e.message || '' + '\n' + 'Open an issues https://github.com/shiyiya/oplayer/issues/new/choose'
             })
           }
         })
@@ -141,7 +141,7 @@
         ]
       ]
 
-      if (/m3u8(#|\?|$)/.test(src) || playlist.some((it) => /m3u8(#|\?|$)/.test(it))) {
+      if (/m3u8(#|\?|$)/.test(src) || playlist.some((it) => /m3u8(#|\?|$)/.test(it.src))) {
         deps.push([
           hlsScriptCdn,
           () => {
@@ -150,6 +150,18 @@
         ])
       }
 
+      if (/.mpd(#|\?|$)/i.test(src) || playlist.some((it) => /.mpd(#|\?|$)/i.test(it.src))) {
+        deps.push(['https://cdn.jsdelivr.net/npm/@oplayer/dash@latest/dist/index.min.js', () => {}])
+        deps.push([
+          'http://cdn.dashjs.org/latest/dash.all.min.js',
+          () => {
+            const dash = ODash()
+            dash.constructor.library = dashjs
+            plugins.push(dash)
+          }
+        ])
+      }
+
       if (playlist.length) {
         deps.push([
           playlistScriptCdn,