brunos3d / video-ambilight

🌈 Ambilight Effect - React - Next.js (YouTube iframe, Video + Canvas).

Video Ambilight

🌈 💻 ✨

HTML5 + JS - Ambilight Effect sample project (YouTube iframe, Video + Canvas).

🧪 About

This is a project that came about as an inspiration after the release of Next.js 11 during Nextjs Conf, where the video player on the presentation page had an ambilight effect.

🚀 Preview

Video + Canvas

YouTube iframe

🖋 CodePen

Video + Canvas

YouTube iframe

video-ambilight's Issues

the next version in the repo doesnt work

Unhandled Runtime Error
TypeError: event.target.getCurrentTime is not a function

Source
src\components\VideoAmbilight\index.tsx (43:42) @ getCurrentTime

  41 | 			switch (event.data) {
  42 | 				case PlayerStates.PLAYING:
> 43 | 					ambilightPlayer?.seekTo(event.target.getCurrentTime(), true)
     | 					                                    ^
  44 | 					ambilightPlayer?.playVideo()
  45 | 					break
  46 | 				case PlayerStates.PAUSED:

iframe API deprecated calls and position-sync bug

The "setPlaybackQuality" API call is a no-op. It was removed in October 2019.

Hence the whole optimizeAmbient function is pointless. The ambient video can be muted in the "onReady" callback once.

The requestAnimationFrame function is also a no-op since it gets started before both objects are ready, then it throws an error and never executes again. Even if you fix that, ambient video stutters like crazy and never really plays, since it's overwhelmed with 60-240 seek calls per second. I've tried using regular "setInterval" at 1000ms and then only updating if both positions are too far apart, and it regularly makes the ambient video stutter. The best solution was not to do it at all.

Here is my entire version

function onYouTubeIframeAPIReady () {

	const el = document.getElementById ( 'video' );
	const videoId = el.dataset.ytId;

	const ambilight = new YT.Player ( 'ambilight', {
		videoId,
		events: {
			onReady: event => { event.target.mute (); }
		}
	});

	const video = new YT.Player ( 'video', {
		videoId,
		events: {
			onStateChange: event => {
				if ( event.data == YT.PlayerState.PLAYING ) {
					ambilight.seekTo ( event.target.getCurrentTime () );
					ambilight.playVideo ();
				} else if ( event.data == YT.PlayerState.PAUSED ) {
					ambilight.pauseVideo ();
					ambilight.seekTo ( event.target.getCurrentTime () );
				}
			}
		}
	});
}

It takes the videoId from the dataset of the "video" element.

e.g. <div id="video" data-yt-id="ASzOzrB-a9E"></div>