diff --git a/packages/youtube-video-element/index.html b/packages/youtube-video-element/index.html
index 0429ce0..f350f8e 100644
--- a/packages/youtube-video-element/index.html
+++ b/packages/youtube-video-element/index.html
@@ -1,40 +1,40 @@
-
- <youtube-video>
-
+
+ <youtube-video>
+
-
-
-
-
-
- <youtube-video>
-
+
+
+
+
+
+ <youtube-video>
+
-
+
-
+
With Media
slot="media"
autopause
>
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+ document.querySelector('#yt1').currentTime = 23;
+ });
+
+ loadbtn.onclick = () => {
+ video.src = 'https://www.youtube.com/watch?v=H3KSKS3TTbc';
+ };
+
+ video.addEventListener('loadstart', (e) => {
+ console.log(e.type);
+ });
+
+ video.addEventListener('play', (e) => {
+ console.log(e.type);
+ });
+
+ video.addEventListener('waiting', (e) => {
+ console.log(e.type);
+ });
+
+ video.addEventListener('playing', (e) => {
+ console.log(e.type);
+ });
+
+ video.addEventListener('pause', (e) => {
+ console.log(e.type);
+ });
+
+ video.addEventListener('seeking', (e) => {
+ console.log(e.type);
+ });
+
+ video.addEventListener('seeked', (e) => {
+ console.log(e.type);
+ });
+
+ video.addEventListener('ended', (e) => {
+ console.log(e.type);
+ });
+
+ video.addEventListener('durationchange', (e) => {
+ console.log(e.type, video.duration);
+ });
+
+ video.addEventListener('volumechange', (e) => {
+ console.log(e.type, video.volume);
+ });
+
+ video.addEventListener('resize', (e) => {
+ console.log(e.type, video.videoWidth, video.videoHeight);
+ });
+
+ video.addEventListener('error', (e) => {
+ console.log(e.type, video.error);
+ });
+
+
diff --git a/packages/youtube-video-element/youtube-video-element.js b/packages/youtube-video-element/youtube-video-element.js
index 1ed0bc7..eb7ce03 100644
--- a/packages/youtube-video-element/youtube-video-element.js
+++ b/packages/youtube-video-element/youtube-video-element.js
@@ -82,6 +82,7 @@ class YoutubeVideoElement extends (globalThis.HTMLElement ?? class {}) {
#seeking = false;
#seekComplete;
isLoaded = false;
+ #error = null;
async load() {
if (this.#loadRequested) return;
@@ -134,7 +135,14 @@ class YoutubeVideoElement extends (globalThis.HTMLElement ?? class {}) {
this.isLoaded = true;
this.loadComplete.resolve();
},
- onError: (error) => console.error(error),
+ onError: (error) => {
+ console.error(error);
+ this.#error = {
+ code: error.data,
+ message: `YouTube iframe player error #${error.data}; visit https://developers.google.com/youtube/iframe_api_reference#onError for the full error message.`
+ }
+ this.dispatchEvent(new Event('error'));
+ },
},
});
@@ -276,6 +284,10 @@ class YoutubeVideoElement extends (globalThis.HTMLElement ?? class {}) {
this.setAttribute('src', val);
}
+ get error() {
+ return this.#error;
+ }
+
/* onStateChange
-1 (unstarted)
0 (ended)