サウウェブ

B'z、映画、海外ドラマ、スケボー、車、BUMPネタバレまとめ

WEB

YouTube動画が画面内に入ったら自動再生とループさせる記述方法

2020/01/30

youtubeの自動再生とループの方法

YouTube動画をWEBページ内に埋め込んだ際に、ページをスクロールして画面内に入ったら自動再生して、動画が終了したら関連動画が出ないようにループさせる設定方法です。

スクロールしてYouTube埋め込み動画が表示領域から出たら停止となるので、同一ページ内で複数のYouTubeがある時に便利かもしれません。

wordpressを使っていたらプラグインで対応できますが、これは普通のコーディングで対応させる方法です。
プラグインを使わせずに自動再生に対応させたいとか、ループさせたい、というときのために忘備録も兼ねてまとめました。

スポンサーリンク

画面内に入ったらYouTubeを自動再生させる方法

まずはYouTubeがスクロールして、画面内に入ったら自動的に再生する方法です。
その次の関連動画が出ないようにするためのループ方法はさらに下に書いています。

YouTube自動再生には”YouTubeのAPI”と”inview.js”というjqueryを使います。

inview.js”はjQuery Plugin To Play / Stop Youtube Videos On Page Scrollからダウンロードしてください。

手順1:javascript読み込み

inview.min.jsとyoutube-inview-autoplay.jsのjavascript読み込みを記述

[code lang="html"] <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="js/jquery.inview.min.js"></script>
<script src="js/jquery.youtube-inview-autoplay.js"></script>
[/code]

 

手順2:プレーヤーを記述

IFrame APIを使用してYouTubeプレーヤーを作成します。

[code lang="html"]

<div class="sample" id="demo-1" data-video-id="[VIDEO_ID]" width="890" height="500"></div>

[/code]

 

手順3:IFrame Player APIを設定

IFrame Player APIコードを非同期にロードし、プラグインを初期化し、プレーヤーパラメータをオブジェクトとして渡します。

[code lang="html"] <script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
$('.sample').inViewAutoplay({
autohide: 1,
modestbranding: 1,
rel: 0,
quality: 'hd720'
});
}
</script>
[/code]

 

プレーヤーパラメータの説明

上記で使用しているIFrame Playerのプレーヤーのパラメータの説明です。

qualityの説明

”quality”にはsmall、medium、large、hd720、hd1080、highres の項目があります。
それぞれの説明は下記となります。

  • 画質レベル small:
    プレーヤーの高さが 240 ピクセル、サイズが 320x240 ピクセル(アスペクト比 4:3)以上。
  • 画質レベル medium:
    プレーヤーの高さが 360 ピクセル、サイズが 640x360 ピクセル(アスペクト比 16:9)または 480x360 ピクセル(アスペクト比 4:3)。
  • 画質レベル large:
    プレーヤーの高さが 480 ピクセル、サイズが 853x480 ピクセル(アスペクト比 16:9)または 640x480 ピクセル(アスペクト比 4:3)。
  • 画質レベル hd720:
    プレーヤーの高さが 720 ピクセル、サイズが 1280x720 ピクセル(アスペクト比 16:9)または 960x720 ピクセル(アスペクト比 4:3)。
  • 画質レベル hd1080:
    プレーヤーの高さが 1080 ピクセル、サイズが 1920x1080 ピクセル(アスペクト比 16:9)または 1440x1080 ピクセル(アスペクト比 4:3)。
  • 画質レベル highres:
    プレーヤーの高さが 1080 ピクセル以上、つまりプレーヤーのアスペクト比が 1920x1080 ピクセル以上。
  • 画質レベル default:
    YouTube が適切な再生画質を選択します。この設定は、画質レベルをデフォルトの状態に戻します。それまでに cueVideoById、loadVideoById または setPlaybackQuality の各関数で行った再生画質の設定は無効になります。

 

その他のYouTubeの埋め込みパラメータ一覧

autoplay プレーヤーを読み込んだときに最初の動画を自動再生するかどうかを指定します。
サポートされる値は 0 または 1 です。デフォルト値は 0 です。
cc_lang_pref プレーヤーに表示する字幕のデフォルトの言語を指定します。パラメータの値は、ISO 639-1 2 文字言語コードに設定します。

このパラメータを使用したうえで cc_load_policy パラメータを 1 に設定した場合、プレーヤーが読み込まれたときに指定した言語の字幕が表示されます。cc_load_policy パラメータを設定していない場合、字幕がデフォルトで表示されなくなります。ただし、ユーザーが字幕を表示する設定にした場合はその指定した言語で表示されます。

cc_load_policy このパラメータの値を 1 に設定すると、ユーザーが字幕をオフにしていても、字幕がデフォルトで表示されます。
デフォルトの動作はユーザー設定に基づきます。
color プレーヤーの動画進行状況バーで使用される色を指定します。これは、動画の視聴した部分を示す色として使用されます。有効なパラメータ値は red と white です。デフォルトでは、動画進行状況バーで赤が使用されます。color オプションの詳細については YouTube API ブログをご覧ください。

注: color パラメータを white に設定すると、modestbranding オプションが無効になります。

controls 動画プレーヤーのコントロールを表示するかどうかを指定します。

  • controls=0 – プレーヤー コントロールを表示しません。
  • controls=1(デフォルト)– プレーヤー コントロールを表示します。
disablekb このパラメータの値を 1 に設定すると、プレーヤーはキーボード操作に応答しなくなります。デフォルト値は 0(キーボード操作が有効)です。現在サポートされているキーボード操作は、次のとおりです。

  • スペースキーまたは K キー: 再生 / 一時停止
  • 左矢印キー: 現在の動画を 5 秒戻す
  • 右矢印キー: 現在の動画を 5 秒進める
  • 上矢印キー: 音量を上げる
  • 下矢印キー: 音量を下げる
  • F キー: 全画面モードを切り替える
  • J キー: 現在の動画を 10 秒戻す
  • L キー: 現在の動画を 10 秒進める
  • M キー: ミュート / ミュート解除を切り替える
  • 0~9 キー: 指定した位置に移動する。0 は動画の先頭へ、1 は全体の 10% の位置へ、2 は全体の 20% の位置へ移動します。
enablejsapi このパラメータの値を 1 に設定すると、IFrame または JavaScript Player API を呼び出してプレーヤーを制御できます。デフォルト値は 0(これらの API を使用してプレーヤーを制御できない)です。

IFrame API とその使用方法について詳しくは、IFrame API のドキュメントをご覧ください(JavaScript Player API のサポートは終了しています)。

end 動画を特定の位置で停止させる場合に、再生を開始してからの時間(秒数)でその位置を指定します。パラメータ値は正の整数です。

時間は動画の先頭から測定されます。start プレーヤー パラメータや startSeconds パラメータの値からではありません。これらは、動画の読み込みまたはキューイングを行うために YouTube Player API 関数で使用されるパラメータです。

fs このパラメータを 0 に設定すると、全画面表示ボタンはプレーヤーに表示されなくなります。デフォルト値は 1 であり、全画面表示ボタンが表示されます。
hl プレーヤーのインターフェースの言語を設定します。パラメータの値は、ISO 639-1 規格の 2 文字言語コードまたは完全指定のロケールです。たとえば、fr や fr-ca は有効な値です。IETF 言語タグ(BCP 47)などの他の言語入力コードも正しく処理されます。

インターフェースの言語はプレーヤーのツールチップで使用され、デフォルトの字幕トラックにも影響します。なお、ユーザー個別の言語設定と利用可能な字幕トラックに基づいて、YouTube が特定のユーザーに対し異なる字幕トラックを選択することもあります。

iv_load_policy このパラメータの値を 1 に設定すると、動画アノテーションがデフォルトで表示されます。3 に設定すると、動画アノテーションはデフォルトで表示されなくなります。デフォルト値は 1 です。
list list パラメータは、プレーヤーに読み込むコンテンツを識別するときに、listType パラメータと組み合わせて使用します。

  • listType パラメータの値が search の場合は、list パラメータの値に検索クエリを指定します。
  • listType パラメータの値が user_uploads の場合、list パラメータの値には、読み込まれるアップロード動画の所有者の YouTube チャンネルを指定します。
  • listType パラメータの値が playlist の場合は、list パラメータの値に YouTube 再生リスト ID を指定します。パラメータ値に含める再生リスト ID には、下の例に示すように、PL という文字を先頭に付ける必要があります。
      https://www.youtube.com/embed?
    listType=playlist
    &list=PLC77007E23FF423C6

注: list パラメータと listType パラメータに値を指定する場合は、IFrame 埋め込み URL に動画 ID を指定する必要がありません。

listType listType パラメータは、プレーヤーに読み込むコンテンツを識別するときに、list パラメータと組み合わせて使用します。有効なパラメータ値は、playlist、search および user_uploads です。

list パラメータと listType パラメータに値を指定する場合は、IFrame 埋め込み URL に動画 ID を指定する必要がありません。

loop 単一動画プレーヤーの場合に 1 を設定すると、最初の動画が繰り返し再生されます。再生リスト プレーヤーまたはカスタム プレーヤーの場合、再生リスト全体を再生した後、最初の動画からもう一度再生が始まります。

サポートされている値は 0 と 1 で、デフォルト値は 0 です。

注: このパラメータは AS3 プレーヤーと埋め込み IFrame でのみサポートされており、AS3 または HTML5 プレーヤーのいずれかが読み込まれます。loop パラメータは、現時点では playlist pパラメータと組み合わせて AS3 プレーヤーで使用した場合のみ動作します。単一の動画をループさせる場合は、loop パラメータの値を 1 に設定し、すでに Player API URL に指定してある動画 ID と同じ値を playlist パラメータの値に設定します。

  https://www.youtube.com/v/VIDEO_ID?
version=3
&loop=1
&playlist=VIDEO_ID
modestbranding このパラメータを使用すると、YouTube プレーヤーに YouTube ロゴが表示されないようにすることができます。パラメータの値を 1 に設定すると、YouTube ロゴがコントロール バーに表示されなくなります。ただし、動画を一時停止したときにユーザーがプレーヤーにカーソルを合わせると、動画の右上に引き続き小さい YouTube テキストラベルが表示されます。
origin このパラメータは IFrame API のセキュリティを強化します。埋め込み IFrame でのみ使用できます。IFrame API を使用している場合、つまり enablejsapi パラメータの値を 1 に設定している場合は、常に自分のドメインを origin パラメータ値として指定する必要があります。
playlist このパラメータには、再生する動画 ID をカンマ区切りのリスト形式で指定します。値を指定すると、URL パスの VIDEO_ID に指定した動画が最初に再生され、playlist パラメータに指定した動画はその後に再生されます。
playsinline このパラメータは iOS 上の HTML5 プレーヤーで動画をインラインまたは全画面表示のどちらで再生するかを制御します。有効な値は次のとおりです。

  • 0: この値を指定すると全画面表示で再生されます。現時点ではこれがデフォルト値ですが、デフォルトは変更される場合があります。
  • 1: この値を指定すると、UIWebViews(allowsInlineMediaPlayback プロパティを TRUE に設定して作成したもの)がインライン再生されます。
rel 注: このパラメータは 2018 年 9 月 25 日以降に変更されます

変更前は、最初の動画の再生が終了したときに、プレーヤーに関連動画を表示するかどうかを指定します。

  • パラメータの値がデフォルト値の 1 に設定されている場合、関連動画が表示されます。
  • パラメータの値が 0 に設定されている場合、関連動画は表示されません。

変更後は、関連動画を無効にできなくなります。代わりに、rel パラメータを 0 に設定すると、再生した動画と同じチャンネルから関連動画が選択されます。

showinfo 注: このパラメータはサポートを終了しており、2018 年 9 月 25 日以降はご利用いただけません。

サポートされている値は 0 と 1 です。

このパラメータの値を 0 に設定すると、動画の再生が始まる前に動画のタイトルやアップロードしたユーザーなどの情報は表示されません。

プレーヤーに再生リストを読み込む場合に、このパラメータの値を明示的に 1 に設定すると、再生リストに含まれる動画のサムネイル画像も読み込み時に表示されます。

start このパラメータを指定すると、動画の先頭から指定された秒数分進めた位置から動画の再生が開始されます。パラメータ値は正の整数です。seekTo 関数と同様に、プレーヤーは指定された時間に最も近いキーフレームを探します。そのため、リクエストされた時間の直前から再生が開始される場合もありますが、ずれは通常、最大で 2 秒程度です。
widget_referrer プレーヤーが埋め込まれている URL を識別します。この値は、YouTube プレーヤーがウィジェットに埋め込まれ、このウィジェットがウェブページやアプリケーションに埋め込まれた場合に、YouTube アナリティクスのレポートで使用されます。このシナリオでは、origin パラメータはウィジェット プロバイダのドメインを識別しますが、YouTube アナリティクスが実際のトラフィック ソースとしてウィジェット プロバイダを識別することはありません。代わりに、YouTube アナリティクスは widget_referrer パラメータ値を使用して、トラフィック ソースに関連するドメインを識別します。

詳しくはYouTubeの公式サイトの「IFrame Player API」ページをご覧ください。

https://developers.google.com/youtube/iframe_api_reference?hl=ja
https://developers.google.com/youtube/player_parameters?hl=ja

スポンサーリンク

記事内広告


 

ループ再生の方法

YouTube動画を見終わった際に、関連動画が表示されないようにするのに必須のループ設定は2通りあります。
標準の埋め込みのiframeを使う方法と、jsで埋め込む方法です。

標準の埋め込みのiframeを使う方法

YouTubeの「埋め込み」から出力できる<iframe>のコードにループの記述を追加する方法になります。

[code lang="html"] <iframe width="560" height="315" src="https://www.youtube.com/embed/[VIDEO_ID]" frameborder="0" allowfullscreen></iframe>
[/code]

の[VIDEO_ID]のあとに「?rel=0&controls=0&autoplay=1&loop=1&playlist=[VIDEO_ID]&showinfo=0&modestbranding=1&wmode=transparent」を追記します。

[code lang="html"] <iframe width="560" height="315" src="https://www.youtube.com/embed/[VIDEO_ID]?rel=0&controls=0&autoplay=1&loop=1&playlist=[VIDEO_ID]&showinfo=0&modestbranding=1&wmode=transparent" frameborder="0" allowfullscreen></iframe>
[/code] [VIDEO_ID]をループする埋め込みができます。

 

jsで埋め込む

https://www.youtube.com/iframe_apiを読み込んでJavaScriptで制御する方法になります。
[VIDEO_ID]はYouTube動画のIDです。

[code lang="html"] <div id="player"></div>

// YouTubeの埋め込み
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(
'player', // 埋め込む場所の指定
{
videoId: '[VIDEO_ID]', // YouTubeのID
playerVars: {
loop: 1,//0:ループしない 1:ループする 1の場合playlist設定必須
playlist: '[VIDEO_ID]',//次に流すYoutubeのID
controls: 0,//コントローラー無し
autoplay: 1,//オートプレイ
showinfo: 0//動画タイトルなど表示しない
},
events: {
'onReady': onPlayerReady
}
}
);
}
[/code]

 

スポンサーリンク

記事内広告


まとめ:YouTubeを自動再生してループさせる

まとめると画面内に入ったらYouTubeを自動再生させて、ループさせる記述は下記となります。

IFrame Player APIコードを非同期にロードし、プラグインを初期化、プレーヤーパラメータにループ設定とプレイリストの設定を追加しました。

[code lang="html"] <div class="youtube-video" id="demo-1" data-video-id="[VIDEO_ID]" width="890" height="500" loop="1"></div>

<script type="text/javascript" src="js/jquery.inview.min.js"></script>
<script type="text/javascript" src="js/jquery.youtube-inview-autoplay.js"></script>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
$('.sample').inViewAutoplay({
autohide: 1,
modestbranding: 1,
rel: 0,
quality: 'hd720',
loop: 1, //0:ループしない 1:ループする 1の場合playlist設定必須
playlist: '[VIDEO_ID]', //次に流すYoutubeのID
showinfo: 0 //動画タイトルなど表示しない
});
}
</script>
[/code]

YouTubeのパラメータは途中で仕様変更などで使えなくなったりするので、書き方は今後変わっていくかもしれません。
とりあえず2020年の時点版です。しばらくは大丈夫かな。

この記事が気に入ったら
いいね ! しよう

-WEB