自分のサイトでYouTubeの動画を自動再生自動ループでなおかつミュートさせていますのでそのやり方を残しておきます。
やりたかったポイントとしては
・自動で再生する。
・自動でループする。
・ミュートさせる。
の3つです。
さらに付け足すと
・同じページで複数配置できる。
・連続で違う動画を再生させる。
です。
これらを実現させるのにがっつりと参考にさせていただいたサイトはこちら
で、こちらでつくったYouTubeの自動再生ページはこちらです。
http://xn--hhro09bn9j8uh.com/youtube1.htmlSee the Pen YouTube自動再生自動ループサンプル1 by mgd_es (@mgd_es) on CodePen.0
3つのYouTube動画が自動再生しています。このページhttp://xn--hhro09bn9j8uh.com/youtube1.html上の左は同じ動画の繰り返しではなく違う動画を連続して再生させています。
あ、一応言っておきますがモバイルは自動で再生はできません。他の要素のループとかは試していません。
それとYouTube動画の再生回数は自動再生の場合カウントされないようになっています。
目次
いきなりこれをつくるのはしんどいのでとりあえずひとつのYouTube動画を自動再生、自動ループ、ミュートさせていきます。
まず基本形となるHTMLコードです。
See the Pen YouTube自動再生自動ループミュート2 by mgd_es (@mgd_es) on CodePen.0
ここから解説
<div id="player"></div>
これを<body>と</body>の間のどこかに記載します。その記載した所にYouTube動画が再生されるようになります。
IDが"player"となっていますがID自体はなんでも良いです。
ただしこの後の行にある
'player',
の所でplayerとしていますので、ここと同じ文字列にしてください。
次に
videoId: '0HO2RVW0f_E',
となっていますが、'0HO2RVW0f_E'がYouTubeのIDとなっています。
YouTubeのIDはアドレスでわかります。例えば
の場合はwatch?v= からの文字列になります。
だったら youtu.be/以降の文字列。
場合によっては
https://youtu.be/0HO2RVW0f_E&rel=0
のように&とか？とかついている場合がありますがその前までになります。
height: '180', width: '320',
となっている所は縦180ピクセル、横320ピクセルという事でYouTube動画はその大きさになります。
loop: 1,
ループするかどうかの設定です。これを1ではなく0にするとループしません。
1にするとループしますが、この場合次に再生するYouTube動画を指定します。
playlist: '0HO2RVW0f_E',
ここで次に再生するYouTube動画のIDを指定します。同じ動画を続けて再生したいので同じIDになっています。
違う動画にしたい場合は違うYouTube動画のIDにすればその動画と交互に再生し続けます。
続けて
controls: 1,
autoplay: 1,
showinfo: 0
となっていますが、
自動再生にするのでautoplayの所は1になります。0にすると手動で再生になります。
という感じですね。
ちょっとよくわかっていないので間違っていたらすみませんがミュートの指定は
event.target.mute();
で指定しているんだと思います。
次は同じYouTube動画の連続再生ではなく、複数のYouTube動画を連続再生させてみます。
下の「Result」ボタンをクリックしてみると実際の動きがわかります。
See the Pen YouTube自動再生自動ループミュート3 by mgd_es (@mgd_es) on CodePen.27115
playlist:の所を見るといっぱい何やら記載がありますが、YouTube動画のIDを並べています。
playlist: 'BtQyJtT1c7E,RiDdasVF1yY,7P6K8XGHz5Y,s5a9Omv7c-E,6C_CQIcu4Xc,gn1S4V-X2hs,HXK51KX66Fg,rV2sfIl77Xo,TuYIsT2oc1I,ZKyFmDwrGGo',
videoId: '0HO2RVW0f_E', のYouTube動画が再生された後に
playlist: 'BtQyJtT1c7E',このIDの'BtQyJtT1c7E'のYouTube動画が再生されてからvideoId: '0HO2RVW0f_E', に戻ってループします。
playlist: 'BtQyJtT1c7E,RiDdasVF1yY', にすると
BtQyJtT1c7E と RiDdasVF1yY のYouTube動画が連続で再生され、videoId: '0HO2RVW0f_E',に戻ってループ再生します。3本連続再生でループになります。
カンマで区切ってYouTubeの動画IDを入れていけばその分連続再生されます。
同じページに複数の自動再生自動ループミュートのYouTube動画を配置する場合ですが
最初に記載にしたこのページをよく見てみると
http://xn--hhro09bn9j8uh.com/youtube1.html
See the Pen YouTube自動再生自動ループサンプル1 by mgd_es (@mgd_es) on CodePen.0
ytPlayer = new YT.Player(
の行から
events: {
'onReady': onPlayerReady
}
}
);
の所までを繰り返して記載しているのがわかるかと思います。
それでその繰り返した部分をちょいちょいいじって別のものにしてしまえば良いわけです。
あと、
ytPlayer = new YT.Player(
'player', //
の、playerの部分はそれぞれ変更してください。
上の例では'player','player2','player3',となっています。
なので配置する時も
<div id="player"></div>
<div id="player2"></div>
<div id="player3"></div>
のようにします。
以上です。
コードをよく見ていただければとりあえずはわかるかと思います。
http://xn--hhro09bn9j8uh.com/youtube1.html
See the Pen YouTube自動再生自動ループサンプル1 by mgd_es (@mgd_es) on CodePen.0
投稿者プロフィール
-
もうだいぶ前からになりますがクラブVJをやっていました。 そこから映像関係のお仕事をやるようになり、コンサートや企業プレゼン、展示会などのムービーを創ったり、時にはプレゼンテーション素材をつくったりするようになりました。
今はPVなども制作したり動画素材を配布・販売したりしています。
■書籍も出しました【動画素材123+45】168本のFHD動画素材を収録しています。
◆もうちょっと詳しいプロフィールはこちらへどうぞ
▼動画素材.com 作者へのサポートをお願いいたします。
Amazonほしいものリスト
