by

YouTube動画埋め込みで、動画停止後に任意の処理を実行する

カテゴリー：JavaScript

記事作成日：2021-11-19

YouTube埋め込み動画で、動画再生後に処理を実行したい場合。

以下に書かれているとおり<br>
<a href="https://developers.google.com/youtube/iframe_api_reference" target="_blank">https://developers.google.com/youtube/iframe_api_reference</a>

## 実施例

```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<iframe id="player" width="640" height="360" src="http://www.youtube.com/embed/hcfOD01E5yY?enablejsapi=1" frameborder="0"></iframe>
<script>
function onYouTubeIframeAPIReady() {
	const player = new YT.Player('player', {
		events: {
			onReady: onPlayerReady,
			onStateChange: onPlayerStateChange,
		}
	});
}
function onPlayerReady(e) {
	console.log('ready');
}
function onPlayerStateChange(e) {
	if (e.data == YT.PlayerState.ENDED) {
		console.log('end');
	} else if (e.data == YT.PlayerState.PLAYING) {
	} else if (e.data == YT.PlayerState.PAUSED) {
	} else if (e.data == YT.PlayerState.BUFFERING) {
	} else if (e.data == YT.PlayerState.CUED) {
	}
}
</script>
<script src="https://www.youtube.com/iframe_api"></script>
</body>
</html>
```

CONTENTS

YouTube動画埋め込みで、動画停止後に任意の処理を実行する

動画

画像

アイコン

文字列

QRコード

Excel

SVG

読み上げ

HTML,CSS

色

3D

音

ビット、バイト

データベース

カレンダー系

IPv4,IPv6

インターネット

開発

ビンゴ大会開催システム(Wタイプ) 自動更新

ビンゴ(Pタイプ) 自動更新

ビンゴ(Aタイプ) 抽選機+カード

ビンゴ(Mタイプ) 手動更新

抽選機等

パズル、ゲーム

他