add youtube src to default examples

vidstack · Nov 24, 2023 · 1004c2c · 1004c2c
1 parent 758ab5a
commit 1004c2c
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 1 deletion.
diff --git a/player/react/default-layout/src/player.tsx b/player/react/default-layout/src/player.tsx
@@ -64,6 +64,9 @@ export function Player() {
       case 'hls':
         setSrc(`https://stream.mux.com/${muxPlaybackId}.m3u8`);
         break;
+      case 'youtube':
+        setSrc('youtube/_cMxraX_5RE');
+        break;
     }
   }
 
@@ -102,6 +105,7 @@ export function Player() {
         <button onClick={() => changeSource('audio')}>Audio</button>
         <button onClick={() => changeSource('video')}>Video</button>
         <button onClick={() => changeSource('hls')}>HLS</button>
+        <button onClick={() => changeSource('youtube')}>YouTube</button>
       </div>
     </>
   );

diff --git a/player/react/default-theme/src/player.tsx b/player/react/default-theme/src/player.tsx
@@ -65,6 +65,9 @@ export function Player() {
       case 'hls':
         setSrc(`https://stream.mux.com/${muxPlaybackId}.m3u8`);
         break;
+      case 'youtube':
+        setSrc('youtube/_cMxraX_5RE');
+        break;
     }
   }
 
@@ -105,6 +108,7 @@ export function Player() {
         <button onClick={() => changeSource('audio')}>Audio</button>
         <button onClick={() => changeSource('video')}>Video</button>
         <button onClick={() => changeSource('hls')}>HLS</button>
+        <button onClick={() => changeSource('youtube')}>YouTube</button>
       </div>
     </>
   );

diff --git a/player/solid/default-layout/src/player.tsx b/player/solid/default-layout/src/player.tsx
@@ -69,6 +69,9 @@ export function Player() {
       case 'hls':
         setSrc(`https://stream.mux.com/${muxPlaybackId}.m3u8`);
         break;
+      case 'youtube':
+        setSrc('youtube/_cMxraX_5RE');
+        break;
     }
   }
 
@@ -100,6 +103,7 @@ export function Player() {
         <button onClick={() => changeSource('audio')}>Audio</button>
         <button onClick={() => changeSource('video')}>Video</button>
         <button onClick={() => changeSource('hls')}>HLS</button>
+        <button onClick={() => changeSource('youtube')}>YouTube</button>
       </div>
     </>
   );

diff --git a/player/solid/default-theme/src/player.tsx b/player/solid/default-theme/src/player.tsx
@@ -77,6 +77,9 @@ export function Player() {
       case 'hls':
         setSrc(`https://stream.mux.com/${muxPlaybackId}.m3u8`);
         break;
+      case 'youtube':
+        setSrc('youtube/_cMxraX_5RE');
+        break;
     }
   }
 
@@ -115,6 +118,7 @@ export function Player() {
         <button onClick={() => changeSource('audio')}>Audio</button>
         <button onClick={() => changeSource('video')}>Video</button>
         <button onClick={() => changeSource('hls')}>HLS</button>
+        <button onClick={() => changeSource('youtube')}>YouTube</button>
       </div>
     </>
   );

diff --git a/player/svelte/default-layout/src/Player.svelte b/player/svelte/default-layout/src/Player.svelte
@@ -66,6 +66,9 @@
       case 'hls':
         src = `https://stream.mux.com/${muxPlaybackId}.m3u8`;
         break;
+      case 'youtube':
+        src = 'youtube/_cMxraX_5RE';
+        break;
     }
   }
 </script>
@@ -98,6 +101,7 @@
   <button on:click={() => changeSource('audio')}>Audio</button>
   <button on:click={() => changeSource('video')}>Video</button>
   <button on:click={() => changeSource('hls')}>HLS</button>
+  <button on:click={() => changeSource('youtube')}>YouTube</button>
 </div>
 
 <style lang="postcss">

diff --git a/player/svelte/default-theme/src/Player.svelte b/player/svelte/default-theme/src/Player.svelte
@@ -71,6 +71,9 @@
       case 'hls':
         src = `https://stream.mux.com/${muxPlaybackId}.m3u8`;
         break;
+      case 'youtube':
+        src = 'youtube/_cMxraX_5RE';
+        break;
     }
   }
 </script>
@@ -108,6 +111,7 @@
   <button on:click={() => changeSource('audio')}>Audio</button>
   <button on:click={() => changeSource('video')}>Video</button>
   <button on:click={() => changeSource('hls')}>HLS</button>
+  <button on:click={() => changeSource('youtube')}>YouTube</button>
 </div>
 
 <style lang="postcss">

diff --git a/player/vue/default-layout/src/Player.vue b/player/vue/default-layout/src/Player.vue
@@ -66,6 +66,9 @@ function changeSource(type: string) {
     case 'hls':
       $src.value = `https://stream.mux.com/${muxPlaybackId}.m3u8`;
       break;
+    case 'youtube':
+      $src.value = 'youtube/_cMxraX_5RE';
+      break;
   }
 }
 </script>
@@ -99,6 +102,7 @@ function changeSource(type: string) {
     <button @click="changeSource('audio')">Audio</button>
     <button @click="changeSource('video')">Video</button>
     <button @click="changeSource('hls')">HLS</button>
+    <button @click="changeSource('youtube')">YouTube</button>
   </div>
 </template>
 

diff --git a/player/vue/default-theme/src/Player.vue b/player/vue/default-theme/src/Player.vue
@@ -73,6 +73,9 @@ function changeSource(type: string) {
     case 'hls':
       $src.value = `https://stream.mux.com/${muxPlaybackId}.m3u8`;
       break;
+    case 'youtube':
+      $src.value = 'youtube/_cMxraX_5RE';
+      break;
   }
 }
 </script>
@@ -108,6 +111,7 @@ function changeSource(type: string) {
     <button @click="changeSource('audio')">Audio</button>
     <button @click="changeSource('video')">Video</button>
     <button @click="changeSource('hls')">HLS</button>
+    <button @click="changeSource('youtube')">YouTube</button>
   </div>
 </template>
 

diff --git a/player/web-components/default-layout/index.html b/player/web-components/default-layout/index.html
@@ -35,6 +35,7 @@
         <button id="audio-src-button">Audio</button>
         <button id="video-src-button">Video</button>
         <button id="hls-src-button">HLS</button>
+        <button id="yt-src-button">YouTube</button>
       </div>
     </main>
   </body>

diff --git a/player/web-components/default-layout/src/main.ts b/player/web-components/default-layout/src/main.ts
@@ -28,11 +28,13 @@ player.addEventListener('can-play', () => {
 
 const audioSrcButton = document.querySelector('#audio-src-button'),
   videoSrcButton = document.querySelector('#video-src-button'),
-  hlsSrcButton = document.querySelector('#hls-src-button');
+  hlsSrcButton = document.querySelector('#hls-src-button'),
+  ytSrcButton = document.querySelector('#yt-src-button');
 
 audioSrcButton?.addEventListener('click', () => changeSource('audio'));
 videoSrcButton?.addEventListener('click', () => changeSource('video'));
 hlsSrcButton?.addEventListener('click', () => changeSource('hls'));
+ytSrcButton?.addEventListener('click', () => changeSource('youtube'));
 
 changeSource('audio');
 
@@ -48,6 +50,9 @@ function changeSource(type: string) {
     case 'hls':
       player.src = `https://stream.mux.com/${muxPlaybackId}.m3u8`;
       break;
+    case 'youtube':
+      player.src = 'youtube/_cMxraX_5RE';
+      break;
   }
 }