スポンサーリンク

Youtubeの埋め込み動画を自動再生や音量ミュートする方法

Youtube

Youtubeの埋め込み動画を JavaScript によって自動で再生する方法を紹介します。
音量をミュートで再生するなどのオプション設定も可能です。

Script は HTML 内に書き込んでも良いですが 外部 JavaScriptでも機能します。
Youtube の埋め込み動画を制御する際にいくつかやり方があるのですが、主流は2種類で、
iframe API
JavaScript Player API
のどちらかを使うのが一般的です。
この内現在広く使われているのは iframe API の方なので、こちらのやり方を解説します。
紛らわしいのは iframe API でも JavaScript を使い制御するので、混乱しないようにしましょう。

Youtube の埋め込み動画を iframe API で音量ミュートで自動再生させる際の設定は以下のようになります。

HTML

動画を設置したい場所に↓のタグを設置します。

<div id="player"></div>

JavaScript

外部 JavaScript に以下のように記述します。
HTML 内に記述する場合は <script></script> で挟む必要があります。

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'f7u9uP__b0Q',
wmode: 'transparent',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
event.target.mute();
}
function onPlayerStateChange(event) {
}

動画の埋め込み設置サイズを指定します。
動画の ID を指定します、埋め込みたい動画の Youtube の URL の以下の部分が ID です。
http://www.youtube.com/watch?v=f7u9uP__b0Q
wmode: 'transparent', は、z-index の制御のためのもので、IE でプレイヤーが最前面になるのを防ぎます。
自動再生と音量ミュートを指定している部分です。

パラメータ

ID やサイズを指定している部分には、他にも追加可能な埋め込みプレイヤーのパラメータがあります。

パラメータ 説明と選択値 既定値
autohide 動画コントローラーを自動で隠すパラメータ。
2:プログレスバーのみ隠す
1:全て隠す
0:全て表示
2
autoplay 1:読み込み時に自動再生
0:自動再生しない
0
color red:プログレスバー赤色。
white:プログレスバー白色。
red
controls 0:動画コントローラー非表示
1:動画コントローラー表示
1
enablejsapi 1:JavaScript API 有効
0:JavaScript API 無効
0
iv_load_policy 1:動画アノテーションが既定で表示される
3:動画アノテーションが既定では表示されない
1
loop 1:動画をくり返し再生。
0:繰り返さない。
0
modestbranding 1:YouTubeロゴをコントロールバーに表示しない。
0:YouTubeロゴをコントロールバーに表示する。
0
playlist 再生するビデオのIDのリスト。
「,」で区切って複数指定する。
 
rel 1:動画が終了した時に関連動画を表示する。
0:関連動画を表示しない。
1
showinfo 0:再生後に動画のタイトルなどの情報を表示しない。
表示する。
1
start 動画の再生開始位置。(秒)  
theme dark:動画コントローラー暗い色
light:動画コントローラー明るい色
dark
wmode ウィンドウの表示モード  

メソッド

event.target.playVideo();event.target.mute();
などの設定部分には他にも色々なメソッドがあります。

分類 メソッド
キュー関数 cueVideoById
loadVideoById
cueVideoByUrl
loadVideoByUrl
再生/停止などの操作 playVideo
pauseVideo
stopVideo
seekTo
clearVideo
音量 mute
unMute
isMuted
setVolume
getVolume
プレイヤーのサイズ setSize
再生速度 getPlaybackRate
setPlaybackRate
getAvailablePlaybackRates
再生状態 getVideoLoadedFraction
getPlayerState
getCurrentTime
再生品質 getPlaybackQuality
setPlaybackQuality
getAvailableQualityLevels
動画の情報 getDuration
getVideoUrl
getVideoEmbedCode
イベントリスナ addEventListener
iframe要素 getIframe
destroy
スポンサーリンク
sns1 RSS Feedly はてな Line Tweet FaceBook sns2 Follow Follow none none none none
スポンサーリンク

コメント

_____________________________________________________________________________________________________