もくじ
JavaScriptでyoutube動画をWebサイトに読み込んで制御する方法を解説します。
YouTube IFrame Player APIを使用してyoutube動画を制御します。
JavaScriptでyoutube動画を読み込む
実装コード
<div class="player_container">
<div id="player"></div>
</div>
.player_container {
display: flex;
justify-content: center;
}
// YouTube IFrame Player APIの読み込み
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// youtubeプレーヤーの読み込み
let player;
let targetPlayer = document.getElementById('player');
function onYouTubeIframeAPIReady() {
player = new YT.Player(targetPlayer, {
videoId: 'VIDEO_ID', // ビデオIDを指定
});
}
ビデオIDの確認方法
YouTubeのビデオIDはURL、共有リンク、埋め込みコードなどから確認することができます。
今回はURLから確認する方法を紹介します。
以下のようなURLの場合、v=abc123XYZ
部分のabc123XYZ
がビデオIDになります。
URL:https://www.youtube.com/watch?v=abc123XYZ&list=xxxxxxxx&start_radio=1
YouTube IFrame Player APIの主なオプション一覧
- autoplay
- 動画の自動再生設定
autoplay: 0
(自動再生OFF)またはautoplay: 1
(自動再生ON)
- color
- プレイヤーの動画進行状況バーの色を指定
color: 'red'
(赤)またはcolor: 'white'
(白)
- controls
- プレイヤーのコントロールを表示するか
controls: 0
(非表示)またはcontrols: 1
(表示)
- disablekb
- プレイヤーのキーボード操作
disablekb: 0
(キーボード操作有効)またはdisablekb: 1
(キーボード操作無効)
- enablejsapi
- YouTube埋め込みプレーヤーでYouTube IFrame Player APIを有効にするか
enablejsapi: 0
(無効)またはenablejsapi: 1
(有効)
- end
- 再生終了位置(秒単位)
end: 60
- fs
- フルスクリーンボタンの表示
fs: 0
(非表示)またはfs: 1
(表示)
- loop
- 動画のループ再生
loop: 0
(無効)またはloop: 1
(有効)
※ループ再生を有効にする場合、playlist
に同じビデオIDを指定します
- playlist
- 再生リスト
値: カンマ区切りで複数のビデオIDを指定
playlist: 'VIDEO_ID_1,VIDEO_ID_2'
- playsinline
- iOSデバイスでのインライン再生
playsinline: 0
(フルスクリーン)またはplaysinline: 1
(インライン)
- start
- 再生開始位置(秒単位)
start: 10
【サンプルコード】YouTube IFrame Player APIオプションの使用例
<div class="player_container">
<div id="player"></div>
</div>
.player_container {
display: flex;
justify-content: center;
}
// YouTube IFrame Player APIの読み込み
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// youtubeプレーヤーの読み込み
let player;
let targetPlayer = document.getElementById('player');
function onYouTubeIframeAPIReady() {
player = new YT.Player(targetPlayer, {
videoId: 'VIDEO_ID_1', // ビデオIDを指定
playerVars: {
controls: 1, // プレイヤーのコントロール表示
playlist: 'VIDEO_ID_1,VIDEO_ID_2', // 再生リスト
},
});
}
YouTube IFrame Player APIの主なイベント
- onReady
- プレイヤーが準備完了したときに発生
使用例:onReady: function(event) { /* コード */ }
- onStateChange
- プレイヤーの状態が変わったときに発生
使用例:onStateChange: function(event) { /* コード */ }
- onPlaybackQualityChange
- 画質が変わったときに発生
使用例:onPlaybackQualityChange: function(event) { /* コード */ }
- onPlaybackRateChange
- 再生速度が変わったときに発生
使用例:onPlaybackRateChange: function(event) { /* コード */ }
- onError
- エラーが発生したときに発生
使用例:onError: function(event) { /* コード */ }
- onApiChange
- プレイヤーAPIが変更されたときに発生
※APIの内部的な変更が発生する可能性がある場合に使用します。
使用例:onApiChange: function(event) { /* コード */ }
【サンプルコード】YouTube IFrame Player APIイベントの使用例
<div class="player_container">
<div id="player"></div>
</div>
.player_container {
display: flex;
justify-content: center;
}
// YouTube IFrame Player APIの読み込み
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// youtubeプレーヤーの読み込み
let player;
let targetPlayer = document.getElementById('player');
function onYouTubeIframeAPIReady() {
player = new YT.Player(targetPlayer, {
videoId: 'VIDEO_ID', // ビデオIDを指定
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onPlaybackQualityChange': onPlaybackQualityChange,
'onPlaybackRateChange': onPlaybackRateChange,
'onError': onPlayerError,
'onApiChange': onApiChange
}
});
function onPlayerReady(event) {
console.log("プレイヤーの準備が完了しました");
}
function onPlayerStateChange(event) {
console.log("プレイヤーの状態が変わりました: " + event.data);
}
function onPlaybackQualityChange(event) {
console.log("画質が変わりました: " + event.data);
}
function onPlaybackRateChange(event) {
console.log("再生速度が変わりました: " + event.data);
}
function onPlayerError(event) {
console.log("エラーが発生しました: " + event.data);
}
function onApiChange(event) {
console.log("プレイヤーAPIが変更されました");
}
}
読み込んだyoutube動画を操作するための主なメソッド
YouTube IFrame Player APIでメソッド(関数)を使用する場合、プレイヤーの準備完了後にonReady
イベントなどで実行する必要があります。
※プレイヤー読み込み前に実行すると、エラーが発生します。
- player.playVideo()
- 動画を再生する
- player.pauseVideo()
- 動画を一時停止する
- player.stopVideo()
- 動画を停止する
- player.seekTo(seconds, allowSeekAhead)
- 指定した秒数にシークする
引数:seconds
: シークする秒数allowSeekAhead
: trueの場合、バッファリングを許可
- player.mute()
- 音声をミュートする
- player.unMute()
- 音声のミュートを解除する
- player.isMuted()
- 音声がミュートされているかどうかを確認する
戻り値:true
(ミュートされている)、false
(ミュートされていない)
- player.setVolume(volume)
- 音量を設定する
引数:volume
: 設定する音量(0から100)
- player.getVolume()
- 現在の音量を取得する
戻り値: 音量(0から100)
- player.setPlaybackRate(suggestedRate)
- 再生速度を設定する
引数:suggestedRate
: 設定する再生速度
- player.getPlaybackRate()
- 現在の再生速度を取得する
戻り値: 再生速度
- player.getAvailablePlaybackRates()
- 利用可能な再生速度のリストを取得する
戻り値: 再生速度のリスト
- player.setSize(width, height)
- プレーヤーのサイズを設定する
引数:width
: 幅height
: 高さ
- player.getVideoLoadedFraction()
- 読み込まれた動画の割合を取得する
戻り値: 読み込まれた割合(0から1)
- player.getPlayerState()
- プレーヤーの現在の状態を取得する
戻り値:-1
: 未開始0
: 終了1
: 再生中2
: 一時停止中3
: バッファリング中5
: 頭出し済み(プレイヤーの準備が完了し、再生可能な状態)
- player.getCurrentTime()
- 動画の現在の再生位置を取得する
戻り値: 再生位置(秒)
- player.getDuration()
- 動画の全体の長さを取得する
戻り値: 長さ(秒)
- player.getVideoUrl()
- 現在再生中の動画のURLを取得する
戻り値: 動画のURL
- player.getVideoEmbedCode()
- 現在再生中の動画の埋め込みコードを取得する
戻り値: 埋め込みコード
【サンプルコード】YouTube IFrame Player APIメソッドの使用例
<div class="player_container">
<div id="player"></div>
</div>
.player_container {
display: flex;
justify-content: center;
}
// YouTube IFrame Player APIの読み込み
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// youtubeプレーヤーの読み込み
let player;
let targetPlayer = document.getElementById('player');
function onYouTubeIframeAPIReady() {
player = new YT.Player(targetPlayer, {
videoId: 'VIDEO_ID', // ビデオIDを指定
events: {
'onReady': onPlayerReady,
}
});
function onPlayerReady(event) {
player.mute();
}
}
アルゴリズムを学びたい方におすすめの1冊
HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊
![アイコン画像](https://webdesign-programming.com/img/icon_momiji.jpeg)
もみじ
HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。
実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。
JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊
![アイコン画像](https://webdesign-programming.com/img/icon_momiji.jpeg)
もみじ
この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。
非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。
もみじ
アルゴリズムとそれを支える数学について基礎から学びたい人にオススメの一冊です。