How to read embed youtube iframe events

Ionic Framework Ionic Angular
1

Hi can anyone help with this problem. The youtube -plugin can’t do this. I assume this would be meaningful for many developers. So there is code that works well when writing/controlling youtube iframe:

HTML:

< "div id=“whateverID” style=“position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;”>
< iframe allowfullscreen=“1” frameborder=“0” title=“YouTube video player” allow=“autoplay” wmode=“transparent” style=“position: absolute;top: 0;left: 0;width: 100%;height: 100%;” >
< /div>

TS:

callInitPlayer(func, args) {
let i = 0,
iframes = document.getElementsByTagName(‘iframe’),
src = ‘’;
iframes[i].setAttribute(“src”,this.url);
// console.log('iframes: ',iframes,'func: ',func, 'args: ',args);
for (i = 0; i < iframes.length; i += 1) {
src = iframes[i].getAttribute(‘src’);
// console.log('src: ',src);
if (src && src.indexOf(‘YouTube’) !== -1) {
iframes[i].contentWindow.postMessage(JSON.stringify({
‘event’: ‘command’,
‘func’: func,
‘args’: args ||
}), ‘*’);
}
}
}

For example playing video from point 30s:
this.url = YouTube;
this.callInitPlayer(‘seekTo’,[30,true]);

There are some documents about this:

I have not been able to make readings like getCurrentTime() work. jQuery gurus please help!

2

Just as a suggestion, you should check out the plyr package. I am currently using it to play audio files and will soon be implementing YouTube and Vimeo videos. Audio has worked great so far.

It has a currentTime property along with a timeupdate event.

3

That sounds very good option. Setting up the Plyr player was not very easy. I use Ionic3/type script in the current project. I need to look after solution to make it work.

6

Hi I finally find good solution for this. (some fixes…)

install @types/youtube

% npm install --save @types/youtube

Add next lines to src/index.html:

<head>
 ...
 <script src=“https://www.youtube.com/player_api” > </script>
 </head>

Add next lines to tskonfig.json:

“compilerOptions”: { …
“typeRoots”: [
“…/node_modules/@types/youtube”
],
“types”: [ “youtube” ]
…}

The page .html - file:

<div id=“player”></div>

The page .TS -file:

 private player;
{}
private callInitPlayer(videoId){
			let tag = document.createElement('script');
		tag.src = 'https://www.youtube.com/iframe_api';
		// console.log('tag: ', tag);
		let firstScriptTag = document.getElementsByTagName('script')[0];
		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
		// console.log('firstScript:', firstScriptTag);
            this.player = new YT.Player('player', {
            // height: '390’,
            width: '100%',
            videoId: id,
            playerVars: {'playsinline': 1},
            events: {'onReady': this.onPlayerReady,
            'onStateChange': this.onPlayerStateChange}
            });

	}
		// 4. The API will call this function when the video player is ready.
		private onPlayerReady(event) {		
        event.target.playVideo();
        
		}
		
		// 5. The API calls this function when the player’s state changes.
		// The function indicates that when playing a video (state=1),
		// the player should play for six seconds and then stop.
		
		private onPlayerStateChange(event) {
		console.log('onPlayerStateChange_event: ', event);
		}

So with these functions you can in set the youtube to page:

this.onYouTubeIframeAPIReady(‘youtubeVideoId’);

Then all YouTube Player API Reference for iframe Embeds values can be called like:

this.player.getCurrentTime();

This works in old Ionic3 project. Someone could try does this work also in Ionic5/Angular