Web ページに埋め込んだ動画をループ再生させる方法

Web ページに動画を埋め込んでブラウザで表示した時に何回も同じ動画を再生させるループ再生を行う方法をまとめてみました。埋め込み方法や閲覧する環境によって方法は変わってきますが、こちらの方法を試してみることによってループ再生させることができるようになるかと思いますのでご確認いただければと思います。

video タグを使って動画を表示している場合のループ再生の対応方法

videoタグを使ってサーバー上に置いてある動画ファイルを読み込んで表示している場合は、videoタグにloop属性を追加することでループ再生を行うことができます。

<video src="sample.mp4" autoplay muted playsinline loop></video>

自動再生させる場合に追加するautoplay属性、muted属性、playsinline属性も一緒に指定することができますので、以下のコードでは自動再生をする設定も行っています。自動再生させる場合の設定の詳細はこちらの記事をご確認ください。

Web ページに埋め込んだ動画が自動再生されない時の対応方法

Web ページに埋め込んだ動画が自動再生されない時の対応方法をまとめてみました。スマホ表示にも対応しています。

hirogeru-blogs.com

sourceタグを使い、複数ファイルを表示候補として挙げる場合にもvideoタグにこちらの属性を追加すれば大丈夫です。

<video autoplay muted playsinline loop>
   <source src="sample.mp4"  type="video/mp4">
   <source src="sample.webm" type="video/webm">
   <source src="sample.ogv"  type="video/ogg">
</video>

iframe タグを使って YouTube 動画を表示している場合のループ再生の対応方法

iframeタグを使って YouTube 動画を読みこんで表示している場合は、iframeタグのsrc属性で指定している URL にパラメータを追加することでループ再生を行うことができます。

YouTube から動画の埋め込みコードを取得すると下記のようなコードが取得できるかと思います。

<iframe width="560" height="315" src="https://www.youtube.com/embed/xOn4ECySDow" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

こちらのsrc属性で指定されている URL にループ再生させるパラメータloop=1を追加します。ただ、これだけはループ再生されなく、再生する動画をプレイリストとして設定する必要があるためplaylist=YouTube 動画 IDのパラメータも追加します。URL の最後に?を追加し、その後にパラメータを&を付けて繋げていきます。

元のURL
https://www.youtube.com/embed/xOn4ECySDow
↓
パラメータを追加した URL
https://www.youtube.com/embed/xOn4ECySDow?autoplay=1&mute=1&loop=1&playlist=xOn4ECySDow

playlist=の後にも動画 ID を指定することに注意です。コードはこのようになります。

<iframe width="560" height="315" src="https://www.youtube.com/embed/xOn4ECySDow?autoplay=1&mute=1&loop=1&playlist=xOn4ECySDow" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

実際に埋め込みますとこのようになり、ループ再生が行われます。

IFrame Player API を使って YouTube 動画をループ表示させる方法

Javascript の IFrame Player API を使い、YouTube 動画を読み込んで表示させている場合に動画をループ表示させる方法のサンプルコードは以下の通りです。

<!DOCTYPE html>
<html>
  <body>
    <!-- 1.この div タグが iframe タグに置き換わります。 -->
    <div id="player"></div>

    <script>
      // 2. IFrame Player API のコードを読み込みます。
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. iframe の設定を行います。
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            videoId: 'xOn4ECySDow',
            playerVars: {
                'loop' : 1,
                'playlist': 'xOn4ECySDow'
            },
            events: {
                'onReady': onPlayerReady,
            }
         });
      }

      // 4. 最初にこちらの onPlayerReady() が呼び出され動画を再生します。
      function onPlayerReady(event) {
        event.target.mute();
        event.target.playVideo();
      }
    </script>
  </body>
</html>

コード解説

コードを簡単に解説していきます。

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

こちらの部分がiframeタグに置き換えられて YouTube 動画が読み込まれる箇所となります。

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

こちらで Iframe Player API を読み込むscriptタグを作成し、他のscriptタグより前に挿入しています。

var player;
function onYouTubeIframeAPIReady() {
   player = new YT.Player('player', {
      videoId: 'xOn4ECySDow',
         playerVars: {
            'loop' : 1,
            'playlist': 'xOn4ECySDow'
         },
         events: {
            'onReady': onPlayerReady,
         }
   });
}

API を読み込み、準備が完了するとこちらのonYoutubeIframeAPIReady()が呼び出されiframeで再生する動画の設定を行えます。YT.Playerのコンストラクタの第一引数playerは置き換えるdivタグのid、videoIdは再生する YouTube 動画の動画 ID を指定します。iframeの準備が完了すると onPlayerReady()が呼び出されるよう設定しています。

さらに playerVarsに'loop' : 1と'playlist' : 'xOn4ECySDow'(動画 ID)を指定することで、プレイリストのループ再生を設定しています。

function onPlayerReady(event) {
   event.target.mute();
   event.target.playVideo();
}

onPlayerReady()が呼び出されると音量をゼロにして動画の再生を行い、自動再生が開始される形となります。こちらはスマホ表示でも動画の自動再生が行われます。

こちらの方法で実際に埋め込みますとこのようなループ再生表示となります。

参考サイト

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

まとめ

Web ページに埋め込んだ動画をループ再生させる方法をまとめさせていただきました。ループ再生させたい時に参考にしてみてください。不明点等ございましたら、下のお問い合わせフォームよりお気軽にご連絡いただければと思います。