Add set source

yoriiis · yoriiis · commit 14f493dfbda4 · 2025-11-18T21:49:32.000+01:00
diff --git a/README.md b/README.md
@@ -269,6 +269,7 @@ new Vlitejs('#player', {
 | `progress`              | Sent periodically to inform interested parties of progress downloading the media.       |
 | `timeupdate`            | Sent when the `currentTime` of the media has changed                                    |
 | `volumechange`          | Sent when audio volume changes                                                          |
+| `sourcechange`          | Sent when source changes                                                                |
 | `enterfullscreen`&sup1; | Sent when the video switches to fullscreen mode                                         |
 | `exitfullscreen`&sup1;  | Sent when the video exits fullscreen mode                                               |
 | `ended`                 | Sent when playback completes                                                            |
@@ -303,6 +304,7 @@ The player instance exposes the following methods, accessible when the player is
 | `getDuration()`        |         -          | `Promise` | Get the duration                  |
 | `mute()`               |         -          |     -     | Mute the volume                   |
 | `unMute()`             |         -          |     -     | Unmute the volume                 |
+| `setSource(source)`    |      `String`      |     -     | Set the new media source          |
 | `seekTo(time)`         |      `Number`      |     -     | Seek to a current time in seconds |
 | `requestFullscreen()`  |         -          |     -     | Request the fullscreen            |
 | `exitFullscreen()`     |         -          |     -     | Exit the fullscreen               |
diff --git a/biome.json b/biome.json
@@ -7,7 +7,7 @@
 	},
 	"files": {
 		"ignoreUnknown": false,
-		"includes": ["**"]
+		"includes": ["**", "!examples/**/*.html"]
 	},
 	"formatter": {
 		"enabled": true,
diff --git a/examples/audio/config.js b/examples/audio/config.js
@@ -2,6 +2,7 @@ import '../../dist/vlite.css'
 import '../../dist/plugins/volume-bar.css'
 import VlitejsVolumeBar from '../../dist/plugins/volume-bar.js'
 import Vlitejs from '../../dist/vlite.js'
+import { changeSourceEvent } from '../shared/utils.js'
 
 Vlitejs.registerPlugin('volume-bar', VlitejsVolumeBar)
 
@@ -24,6 +25,9 @@ new Vlitejs('#player', {
 		player.on('progress', () => console.log('progress'))
 		player.on('timeupdate', () => console.log('timeupdate'))
 		player.on('volumechange', () => console.log('volumechange'))
+		player.on('sourcechange', () => console.log('sourcechange'))
 		player.on('ended', () => console.log('ended'))
+
+		changeSourceEvent({ player })
 	}
 })
diff --git a/examples/audio/index.html b/examples/audio/index.html
@@ -8,5 +8,6 @@
 	</head>
 	<body>
 		<audio id="player" src="https://yoriiis.github.io/cdn/static/vlitejs/demo-audio-html5.mp3"></audio>
+		<%= require('html-loader!../shared/change-source.html').default %>
 	</body>
 </html>
diff --git a/examples/dailymotion/config.js b/examples/dailymotion/config.js
@@ -3,6 +3,7 @@ import '../../dist/plugins/volume-bar.css'
 import VlitejsVolumeBar from '../../dist/plugins/volume-bar.js'
 import VlitejsDailymotion from '../../dist/providers/dailymotion.js'
 import Vlitejs from '../../dist/vlite.js'
+import { changeSourceEvent } from '../shared/utils.js'
 
 Vlitejs.registerProvider('dailymotion', VlitejsDailymotion, {
 	playerId: 'x9scg'
@@ -35,8 +36,11 @@ new Vlitejs('#player', {
 		player.on('progress', () => console.log('progress'))
 		player.on('timeupdate', () => console.log('timeupdate'))
 		player.on('volumechange', () => console.log('volumechange'))
+		player.on('sourcechange', () => console.log('sourcechange'))
 		player.on('enterfullscreen', () => console.log('enterfullscreen'))
 		player.on('exitfullscreen', () => console.log('exitfullscreen'))
 		player.on('ended', () => console.log('ended'))
+
+		changeSourceEvent({ player })
 	}
 })
diff --git a/examples/dailymotion/index.html b/examples/dailymotion/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
 	<head>
 		<meta charset="utf-8" />
@@ -8,5 +8,6 @@
 	</head>
 	<body>
 		<div id="player" data-dailymotion-id="x88trc6"></div>
+		<%= require('html-loader!../shared/change-source.html').default %>
 	</body>
 </html>
diff --git a/examples/html5/config.js b/examples/html5/config.js
@@ -11,6 +11,7 @@ import VlitejsPip from '../../dist/plugins/pip.js'
 import VlitejsSubtitle from '../../dist/plugins/subtitle.js'
 import VlitejsVolumeBar from '../../dist/plugins/volume-bar.js'
 import Vlitejs from '../../dist/vlite.js'
+import { changeSourceEvent } from '../shared/utils.js'
 
 Vlitejs.registerPlugin('subtitle', VlitejsSubtitle)
 Vlitejs.registerPlugin('pip', VlitejsPip)
@@ -55,6 +56,7 @@ new Vlitejs('#player', {
 		player.on('progress', () => console.log('progress'))
 		player.on('timeupdate', () => console.log('timeupdate'))
 		player.on('volumechange', () => console.log('volumechange'))
+		player.on('sourcechange', () => console.log('sourcechange'))
 		player.on('enterfullscreen', () => console.log('enterfullscreen'))
 		player.on('exitfullscreen', () => console.log('exitfullscreen'))
 		player.on('enterpip', () => console.log('enterpip'))
@@ -64,5 +66,7 @@ new Vlitejs('#player', {
 		player.on('ended', () => console.log('ended'))
 		player.on('castsessionstarted', () => console.log('castsessionstarted'))
 		player.on('castsessionended', () => console.log('castsessionended'))
+
+		changeSourceEvent({ player })
 	}
 })
diff --git a/examples/html5/index.html b/examples/html5/index.html
@@ -11,5 +11,6 @@
 			<track label="English" kind="subtitles" srclang="en" src="https://yoriiis.github.io/cdn/static/vlitejs/demo-video-html5-subtitle-en.vtt" default />
 			<track label="French" kind="subtitles" srclang="fr" src="https://yoriiis.github.io/cdn/static/vlitejs/demo-video-html5-subtitle-fr.vtt" />
 		</video>
+		<%= require('html-loader!../shared/change-source.html').default %>
 	</body>
 </html>
diff --git a/examples/shared/change-source.html b/examples/shared/change-source.html
@@ -0,0 +1,8 @@
+<br />
+<form class="change-source">
+	<fieldset>
+		<legend>Change media source</legend>
+		<input type="text" name="url" placeholder="Enter new source" value="" />
+	</fieldset>
+	<button type="submit">Submit</button>
+</form>
diff --git a/examples/shared/utils.js b/examples/shared/utils.js
@@ -0,0 +1,8 @@
+export function changeSourceEvent({ player }) {
+	document.querySelector('.change-source').addEventListener('submit', (e) => {
+		e.preventDefault()
+
+		const formData = new FormData(e.target)
+		player.setSource(formData.get('url'))
+	})
+}
diff --git a/examples/vimeo/config.js b/examples/vimeo/config.js
@@ -3,6 +3,7 @@ import '../../dist/plugins/volume-bar.css'
 import VlitejsVolumeBar from '../../dist/plugins/volume-bar.js'
 import VlitejsVimeo from '../../dist/providers/vimeo.js'
 import Vlitejs from '../../dist/vlite.js'
+import { changeSourceEvent } from '../shared/utils.js'
 
 Vlitejs.registerProvider('vimeo', VlitejsVimeo)
 Vlitejs.registerPlugin('volume-bar', VlitejsVolumeBar)
@@ -34,8 +35,11 @@ new Vlitejs('#player', {
 		player.on('progress', () => console.log('progress'))
 		player.on('timeupdate', () => console.log('timeupdate'))
 		player.on('volumechange', () => console.log('volumechange'))
+		player.on('sourcechange', () => console.log('sourcechange'))
 		player.on('enterfullscreen', () => console.log('enterfullscreen'))
 		player.on('exitfullscreen', () => console.log('exitfullscreen'))
 		player.on('ended', () => console.log('ended'))
+
+		changeSourceEvent({ player })
 	}
 })
diff --git a/examples/vimeo/index.html b/examples/vimeo/index.html
@@ -8,5 +8,6 @@
 	</head>
 	<body>
 		<div id="player" data-vimeo-id="162391385"></div>
+		<%= require('html-loader!../shared/change-source.html').default %>
 	</body>
 </html>
diff --git a/examples/youtube/config.js b/examples/youtube/config.js
@@ -3,6 +3,7 @@ import '../../dist/plugins/volume-bar.css'
 import VlitejsVolumeBar from '../../dist/plugins/volume-bar.js'
 import VlitejsYoutube from '../../dist/providers/youtube.js'
 import Vlitejs from '../../dist/vlite.js'
+import { changeSourceEvent } from '../shared/utils.js'
 
 Vlitejs.registerProvider('youtube', VlitejsYoutube)
 Vlitejs.registerPlugin('volume-bar', VlitejsVolumeBar)
@@ -34,12 +35,15 @@ new Vlitejs('#player', {
 		player.on('progress', () => console.log('progress'))
 		player.on('timeupdate', () => console.log('timeupdate'))
 		player.on('volumechange', () => console.log('volumechange'))
+		player.on('sourcechange', () => console.log('sourcechange'))
 		player.on('enterfullscreen', () => console.log('enterfullscreen'))
 		player.on('exitfullscreen', () => console.log('exitfullscreen'))
 		player.on('enterpip', () => console.log('enterpip'))
 		player.on('leavepip', () => console.log('leavepip'))
 		player.on('trackenabled', () => console.log('trackenabled'))
 		player.on('trackdisabled', () => console.log('trackdisabled'))
 		player.on('ended', () => console.log('ended'))
+
+		changeSourceEvent({ player })
 	}
 })
diff --git a/examples/youtube/index.html b/examples/youtube/index.html
@@ -7,6 +7,7 @@
 		<!-- CSS and JavaScript files are automatically injected by the HtmlWebpackPlugin -->
 	</head>
 	<body>
-		<div id="player" data-youtube-id="C4qgAaxB_pc"></div>
+		<div id="player" data-youtube-id="43TH3PKNc_c"></div>
+		<%= require('html-loader!../shared/change-source.html').default %>
 	</body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -93,6 +93,7 @@
 		"babel-loader": "^10.0.0",
 		"css-loader": "^7.1.2",
 		"css-minimizer-webpack-plugin": "^7.0.2",
+		"html-loader": "^5.1.0",
 		"html-webpack-plugin": "^5.6.4",
 		"mini-css-extract-plugin": "^2.9.4",
 		"postcss": "^8.5.6",
diff --git a/src/core/player.ts b/src/core/player.ts
@@ -168,6 +168,13 @@ export default abstract class Player {
 	 */
 	public abstract methodUnMute(): void
 
+	/**
+	 * methodSetSource
+	 * Extends by the provider
+	 * @abstract
+	 */
+	public abstract methodSetSource(videoId: string): void
+
 	/**
 	 * On the player is ready
 	 */
@@ -464,6 +471,23 @@ export default abstract class Player {
 		this.dispatchEvent('volumechange')
 	}
 
+	/**
+	 * Set the new source of the player
+	 * @param videoId Video ID
+	 */
+	setSource(videoId: string) {
+		// Prevent onMediaEnded to play
+		this.options.loop = false
+
+		this.pause()
+		this.onMediaEnded()
+		this.methodSetSource(videoId)
+		this.controlBar.onReady()
+		this.play()
+
+		this.dispatchEvent('sourcechange')
+	}
+
 	/**
 	 * Update the current time of the media element
 	 * @param newTime New current time of the media element
diff --git a/src/providers/dailymotion/dailymotion.ts b/src/providers/dailymotion/dailymotion.ts
@@ -163,6 +163,14 @@ export default function DailymotionProvider(Player: any, options: interfaceProvi
 			})
 		}
 
+		/**
+		 * Change source method of the player
+		 * {@link https://developers.dailymotion.com/sdk/player-sdk/web/#player-methods}
+		 */
+		methodSetSource(id: string) {
+			this.instance.loadContent({ video: id })
+		}
+
 		/**
 		 * Play method of the player
 		 */
diff --git a/src/providers/html5/html5.ts b/src/providers/html5/html5.ts
diff --git a/src/providers/vimeo/vimeo.ts b/src/providers/vimeo/vimeo.ts
diff --git a/src/providers/youtube/youtube.ts b/src/providers/youtube/youtube.ts
