Skip to content

Commit

Permalink
requestAnimationFrame on updating the seek bar values and some testing
Browse files Browse the repository at this point in the history
  • Loading branch information
@stamat
stamat committed Nov 8, 2023
1 parent 6fcf8bc commit 23e3b68
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 12 deletions.
42 changes: 41 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ <h1>Cake in a frying pan? Impossible!</h1>
<button class="vbg-destroy" data-selector="#vbg">Destroy</button>
<button class="vbg-initialize" data-selector="#vbg" data-src="https://www.youtube.com/watch?v=LC5rEhxGqT4">Initialize</button>

<div class="seek-bar-wrapper" style="width: 100%" data-target="#vbg">
<div data-target="#vbg" class="seek-bar-wrapper" style="width: calc(100% - 32px); position: absolute; bottom: 16px; left: 16px;">
<progress class="seek-bar-progress js-seek-bar-progress" value="0" max="100" aria-hidden="true"></progress>
<input type="range" value="0" min="0" max="100" step="any" aria-label="Seek" class="seek-bar js-seek-bar">
</div>
Expand All @@ -239,6 +239,11 @@ <h1>Cake in a frying pan? Impossible!</h1>
<div class="inner">
<h1>Click the button to pause.</h1>
<h2>P.S. it also starts 10s into the video to skip the video intro and ends 16s into the video for shorter loops</h2>

<div data-target="#vbg2" class="seek-bar-wrapper" style="width: calc(100% - 32px); position: absolute; bottom: 16px; left: 16px;">
<progress class="seek-bar-progress js-seek-bar-progress" value="0" max="100" aria-hidden="true"></progress>
<input type="range" value="0" min="0" max="100" step="any" aria-label="Seek" class="seek-bar js-seek-bar">
</div>
</div>
</div>
</div>
Expand All @@ -248,6 +253,11 @@ <h2>P.S. it also starts 10s into the video to skip the video intro and ends 16s
<div class="inner">
<h1>Mute / Unmute.</h1>
<button class="src-change-button" data-src="https://www.youtube.com/watch?v=UIyoNvInzCI">Change Source</button>

<div data-target="#vbg-2" class="seek-bar-wrapper" style="width: calc(100% - 32px); position: absolute; bottom: 16px; left: 16px;">
<progress class="seek-bar-progress js-seek-bar-progress" value="0" max="100" aria-hidden="true"></progress>
<input type="range" value="0" min="0" max="100" step="any" aria-label="Seek" class="seek-bar js-seek-bar">
</div>
</div>
</div>
</div>
Expand All @@ -257,6 +267,11 @@ <h1>Mute / Unmute.</h1>
<div class="content">
<div class="inner">
<h1>Mute / Unmute.</h1>

<div data-target="#vbg3" class="seek-bar-wrapper" style="width: calc(100% - 32px); position: absolute; bottom: 16px; left: 16px;">
<progress class="seek-bar-progress js-seek-bar-progress" value="0" max="100" aria-hidden="true"></progress>
<input type="range" value="0" min="0" max="100" step="any" aria-label="Seek" class="seek-bar js-seek-bar">
</div>
</div>
</div>
</div>
Expand All @@ -266,6 +281,11 @@ <h1>Mute / Unmute.</h1>
<div class="inner">
<h1>VIMEO!</h1>
<button class="src-change-button" data-src="https://vimeo.com/64289386">Change Source</button>

<div data-target="#vbg-3" class="seek-bar-wrapper" style="width: calc(100% - 32px); position: absolute; bottom: 16px; left: 16px;">
<progress class="seek-bar-progress js-seek-bar-progress" value="0" max="100" aria-hidden="true"></progress>
<input type="range" value="0" min="0" max="100" step="any" aria-label="Seek" class="seek-bar js-seek-bar">
</div>
</div>
</div>
</div>
Expand All @@ -274,6 +294,11 @@ <h1>VIMEO!</h1>
<div class="content">
<div class="inner">
<h1>VIMEO!</h1>

<div data-target="#vbg0" class="seek-bar-wrapper" style="width: calc(100% - 32px); position: absolute; bottom: 16px; left: 16px;">
<progress class="seek-bar-progress js-seek-bar-progress" value="0" max="100" aria-hidden="true"></progress>
<input type="range" value="0" min="0" max="100" step="any" aria-label="Seek" class="seek-bar js-seek-bar">
</div>
</div>
</div>
</div>
Expand All @@ -282,6 +307,11 @@ <h1>VIMEO!</h1>
<div class="content">
<div class="inner">
<h1>VIMEO CONTROLS!</h1>

<div data-target="#vbg4" class="seek-bar-wrapper" style="width: calc(100% - 32px); position: absolute; bottom: 16px; left: 16px;">
<progress class="seek-bar-progress js-seek-bar-progress" value="0" max="100" aria-hidden="true"></progress>
<input type="range" value="0" min="0" max="100" step="any" aria-label="Seek" class="seek-bar js-seek-bar">
</div>
</div>
</div>
</div>
Expand All @@ -291,6 +321,11 @@ <h1>VIMEO CONTROLS!</h1>
<div class="inner">
<h1>HTML5 VIDEO!</h1>
<button class="src-change-button" data-src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">Change Source</button>

<div data-target="#vbg-4" class="seek-bar-wrapper" style="width: calc(100% - 32px); position: absolute; bottom: 16px; left: 16px;">
<progress class="seek-bar-progress js-seek-bar-progress" value="0" max="100" aria-hidden="true"></progress>
<input type="range" value="0" min="0" max="100" step="any" aria-label="Seek" class="seek-bar js-seek-bar">
</div>
</div>
</div>
</div>
Expand All @@ -299,6 +334,11 @@ <h1>HTML5 VIDEO!</h1>
<div class="content">
<div class="inner">
<h1>HTML5 VIDEO!</h1>

<div data-target="#vbg-1" class="seek-bar-wrapper" style="width: calc(100% - 32px); position: absolute; bottom: 16px; left: 16px;">
<progress class="seek-bar-progress js-seek-bar-progress" value="0" max="100" aria-hidden="true"></progress>
<input type="range" value="0" min="0" max="100" step="any" aria-label="Seek" class="seek-bar js-seek-bar">
</div>
</div>
</div>
</div>
Expand Down
16 changes: 12 additions & 4 deletions jquery.youtube-background.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions jquery.youtube-background.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion jquery.youtube-background.min.js
View file

Large diffs are not rendered by default.

17 changes: 13 additions & 4 deletions src/video-backgrounds.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,25 +218,34 @@ export class SeekBar {
if (vbgInstance) this.vbgInstance = vbgInstance;

this.targetElem.addEventListener('video-background-time-update', this.onTimeUpdate.bind(this));
this.targetElem.addEventListener('video-background-play', this.onReady.bind(this));
this.targetElem.addEventListener('video-background-ready', this.onReady.bind(this));

this.inputElem.addEventListener('input', this.onInput.bind(this));
this.inputElem.addEventListener('change', this.onChange.bind(this));
}

onReady(event) {
this.vbgInstance = event.detail;
}

onTimeUpdate(event) {
if (!this.vbgInstance) this.vbgInstance = event.detail;
if (!this.lock) this.setProgress(this.vbgInstance.percentComplete);
if (!this.lock) requestAnimationFrame(() => this.setProgress(this.vbgInstance.percentComplete));
}

onInput(event) {
this.lock = true;
this.setProgress(event.target.value);
requestAnimationFrame(() => this.setProgress(event.target.value));
}

onChange(event) {
this.lock = false;
this.setProgress(event.target.value);
if (this.vbgInstance) this.vbgInstance.seek(event.target.value);
requestAnimationFrame(() => this.setProgress(event.target.value));
if (this.vbgInstance) {
this.vbgInstance.seek(event.target.value);
if (this.vbgInstance.playerElement && this.vbgInstance.playerElement.style.opacity === 0) this.vbgInstance.playerElement.style.opacity = 1;
}
}

setProgress(value) {
Expand Down

0 comments on commit 23e3b68

Please sign in to comment.