IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / javascript / YouTubeで動画の指定範囲を繰り返す方法

YouTubeで動画の指定範囲を繰り返す方法

2019/10/31 javascript, youtube

YouTubeの動画をページの背景にしようかと企み(笑)、IFrame Player API をいろいろ試しているのですが、組み込みプレーヤーで指定範囲をリピートする方法を発見しました。発見ではなく既出かもしれません。

  • YouTube IFrame Player API
  • 繰り返し再生 loop=1 を使う
    • loop=1:2度目以降は最初から繰り返す
    • onStateChangeイベントを使う
  • スクリプト

YouTube IFrame Player API

リファレンスはこちら。

iframe 組み込みの YouTube Player API リファレンス  |  YouTube IFrame Player API

はてなブログでは編集画面のサイドバーにある「YouYube貼り付け」で動画を貼り付けますと iframeタグで動画が表示されます。

選択しますと、次のコードが挿入されます。

<iframe width="560" height="315" frameborder="0" allowfullscreen="" src="//www.youtube.com/embed/vBiKfF2BYmA"></iframe><br><a href="https://youtube.com/watch?v=vBiKfF2BYmA">『第三夫人と髪飾り』予告編</a>

それを Javascript でコントールしようということです。

繰り返し再生 loop=1 を使う

動画を繰り返し再生するにはパラメータに loop=1 を指定するだけなんですが、リファレンスにあるようにこれはあくまでも最初から最後までを繰り返す指定で、動画の一部だけを繰り返すことはできません。

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

loop=1:2度目以降は最初から繰り返す

一部を再生するには、start と end パラメータに先頭からの秒数を指定します。

下のサンプルは、playlist=vBiKfF2BYmA&loop=1&start=4&end=18 のパラメータを指定しています。loop は同一画像を繰り返す場合でも playlist に動画ID を指定しないと機能しません。

 

スタートしてみてください。4秒からスタートし、18秒で0秒に戻り、以降はすべての再生を繰り返します。マウスカーソルを置くと時間が見られます。

onStateChangeイベントを使う

いろいろググってみますとブラウザの拡張機能やアプリを使う方法はヒットしますが、組み込みプレーヤーを使う方法は見つかりません。

で、リファレンスに紹介されている関数を使ってみましたら期待通りのことができました。

 

動画の4秒から18秒を無限に繰り返します。(キャッシュのせいかうまくいかない場合があるようです)

スクリプト

<html>
<body>
<div id="ytplayer"></div>
<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);


var player;
function onYouTubePlayerAPIReady() {
   player = new YT.Player('ytplayer', {
       events: {
           'onReady': onPlayerReady,
           'onStateChange': onPlayerStateChange
       }
   });
}


function onPlayerReady(event) {
   player.cueVideoById({'videoId': '動画ID',
       'startSeconds': スタート秒,
       'endSeconds': エンド秒,
   });
   event.target.mute();
}


function onPlayerStateChange(event) {
   if (event.data == 0) {
       player.seekTo(スタート秒);
       event.target.playVideo();
   }
}
</script>
</body>
</html>

onStateChange で18秒の停止イベントを拾い、動画の4秒後にシークしあらためてスタートさせ、それを繰り返しています。ちなみに、この動画「第三夫人と髪飾り」という映画の予告編です。おすすめ映画です。

www.movieimpressions.com

この YouTube IFrame Player API おもしろいですね。

YouTube完全マニュアル[第3版]

YouTube完全マニュアル[第3版]

桑名由美
1,540円(01/28 04:34時点)
Amazon
新テーマ「imz-listing」完成だが、公開の道は険し
Joomla! 3.9.13 セキュリティ & バグフィックスがリリースされています
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

2022/12/21

WordPress:robotsメタタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress59
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com