From c4ce38a2df45cc551c0402fddec5c7c3484db25d Mon Sep 17 00:00:00 2001 From: Manuel Calleriza Date: Thu, 6 Feb 2025 16:34:00 -0300 Subject: [PATCH 1/3] Added event dispatch for youtube errors --- packages/youtube-video-element/youtube-video-element.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/youtube-video-element/youtube-video-element.js b/packages/youtube-video-element/youtube-video-element.js index 1ed0bc7..84ecc9c 100644 --- a/packages/youtube-video-element/youtube-video-element.js +++ b/packages/youtube-video-element/youtube-video-element.js @@ -134,7 +134,10 @@ class YoutubeVideoElement extends (globalThis.HTMLElement ?? class {}) { this.isLoaded = true; this.loadComplete.resolve(); }, - onError: (error) => console.error(error), + onError: (error) => { + console.error(error); + this.dispatchEvent(new CustomEvent('error', { detail: error })); + }, }, }); From 852f12cfc8b0e9512f6625b3bf5257d37a625dda Mon Sep 17 00:00:00 2001 From: Manuel Calleriza Date: Tue, 11 Feb 2025 14:53:49 -0300 Subject: [PATCH 2/3] Added error event listener for youtube --- packages/youtube-video-element/index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/youtube-video-element/index.html b/packages/youtube-video-element/index.html index 0429ce0..7e0a41d 100644 --- a/packages/youtube-video-element/index.html +++ b/packages/youtube-video-element/index.html @@ -113,6 +113,9 @@

With Media video.addEventListener('resize', (e) => { console.log(e.type, video.videoWidth, video.videoHeight); }); + video.addEventListener('error', (e) => { + console.log(e); + }); From 5071ab5b362331f886bc5603666fd0217b72f523 Mon Sep 17 00:00:00 2001 From: Manuel Calleriza Date: Thu, 20 Feb 2025 15:01:07 -0300 Subject: [PATCH 3/3] Updated error message for YouTube errors --- packages/youtube-video-element/index.html | 182 +++++++++--------- .../youtube-video-element.js | 11 +- 2 files changed, 101 insertions(+), 92 deletions(-) diff --git a/packages/youtube-video-element/index.html b/packages/youtube-video-element/index.html index 7e0a41d..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 Chrome

+

With Media Chrome

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 84ecc9c..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; @@ -136,7 +137,11 @@ class YoutubeVideoElement extends (globalThis.HTMLElement ?? class {}) { }, onError: (error) => { console.error(error); - this.dispatchEvent(new CustomEvent('error', { detail: 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')); }, }, }); @@ -279,6 +284,10 @@ class YoutubeVideoElement extends (globalThis.HTMLElement ?? class {}) { this.setAttribute('src', val); } + get error() { + return this.#error; + } + /* onStateChange -1 (unstarted) 0 (ended)