【WordPress】サイドバーに無音繰り返し動画を置くのは、とても簡単!!


2024.2.23追記: ライブストリーミング配信カメラが毎日切り替わるように変更しました。
2023.8.23追記: Windows Mac両方に対応したライブストリーミング配信用スクリプトを掲載しました。


 Vimeoの動画を無音繰り返し動画として利用する場合については、こちらのブログをご覧いただくとして、一般的な、WordPressフォルダ内の動画、Dropboxの動画など、URLにて呼び出せるものについては、サクッと簡単に、作ることが出来るので、ご紹介します。

以下のようになります。


<WordPressのサイドバーへ無音繰り返し動画を貼り付ける>
別ページで表示


以下は、サイドバー用無音繰り返し動画のソースコードのサンプルです。
下記のポイント解説の中に動画貼り付けがありますが、この動画ブロックを、HTML記述に変更してコピーしただけです。

<ソースコードサンプル>

<figure class="wp-block-video aligncenter"><video autoplay loop muted src="https://xxxxxxxx/xxxxx/xxxxx.mov" playsinline></video></figure>

これを、ウイジェットのカスタムHTMLへ、コピー&ペーストして、URLの部分だけを置き換えます。

ポイント解説

<1> 無音繰り返し動画を、本文の中で作ってみます。

ブロックから動画を選びます。本文では、右に表示されるバーから、再生の方法を細かく指定することが出来ます。自動再生、ループ、ミュート、インライン再生、をON、プレイバックコントロールだけをOFFにしてみると、上のように無音繰り返し動画になります。

<2> HTMLソースコードの取り出し方

貼り付けた動画をクリックすると、バーに点3つのマーク→HTMLとして編集、を選びます。

ソースコードが表示されます。これをコピーします。単にコピーするだけで何も変更しませんので、ご注意ください。

超簡単です!

<3> 名古屋港水族館のライブ映像をサイドバーへ載せるには。
〜ライブストリーミング配信〜

珍しく、名古屋港水族館はライブ配信を行っています(いつまでサービスを行ってくれるかわかりませんが)。この中からライブカメラのURL(※1)をカスタムHTMLブロックへ貼り付けると、以下になります。これをウイジェットのカスタムHTMLへコピー&ペーストすると、なかなかオシャレになります。ただし、以下のソースコードは、JAVA無料サービスのjsDeliverを利用しているため、いつまでも使用できるとは限りません。

※1:URLは時々変更されているようです。Macの場合は、再生中のライブ動画の上で右クリック→ビデオアドレスをコピーします。

<ソースコードサンプル>

“サムネのURL”は、現状、自動開始にしてあるため、必要ありませんが、autoplay=””を削除した場合は、登録しておいた方が見栄えはいいです。

日本時間で日付が変わった時、カメラが移動します。

初期設定は、2024年2月23日に配列の先頭からスタートするように設定してあります。7種類ですと曜日とカメラが一致してしまうため、coralreef サンゴ礁を2日連続にしています。

coralreef サンゴ礁 coralreef サンゴ礁 dolphin イルカのプール kuroshio 黒潮の水槽 livingcoral ライブコーラル beluga ベルーガのプール umigame ウミガメ回遊水槽 penguin ペンギン水槽

<a href="https://nagoyaaqua.jp/calendar/">名古屋港水族館のご案内</a>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="hls" preload="metadata" controls="" autoplay="" loop="" muted="" width="100%" playsinline="" poster="サムネのURL"></video>
<p id="currentCameraCaption"></p>

<script>
  var cameras = ['coralreef', 'coralreef', 'dolphin', 'kuroshio', 'livingcoral', 'beluga', 'umigame', 'penguin'];
  var video = document.getElementById("hls");
  var currentCameraCaption = document.getElementById("currentCameraCaption");
  video.volume = 0.5;
  var config = { maxBufferLength: 12, maxBufferSize: 10 * 1000 * 1000 };

  // 初期設定の日付
  var initialDate = new Date('2024-02-23T00:00:00+09:00');

  // 初回のカメラ設定
  setInitialCamera();

  // 初回のカメラ設定関数
  function setInitialCamera() {
    var currentDate = new Date();
    var timeDifference = currentDate - initialDate;

    // カメラを設定
    var initialCameraIndex = Math.floor(timeDifference / (24 * 60 * 60 * 1000)) % cameras.length;
    var initialCamera = cameras[initialCameraIndex];
    setCurrentCamera(initialCamera);
    updateCurrentCameraCaption(initialCamera);
  }

  // 毎日日本時間0時にカメラを切り替える
  function scheduleCameraSwitch() {
    var now = new Date();
    var tomorrow = new Date(now);
    tomorrow.setDate(now.getDate() + 1);
    tomorrow.setHours(0, 0, 0, 0);

    var timeUntilMidnight = tomorrow - now;
    setTimeout(function () {
      switchCamera();
      // 次の日の0時に再度スケジュール
      scheduleCameraSwitch();
    }, timeUntilMidnight);
  }

  // カメラ切り替え関数
  function switchCamera() {
    var currentCamera = getCurrentCamera();
    var currentCameraIndex = cameras.indexOf(currentCamera);
    var nextCameraIndex = (currentCameraIndex + 1) % cameras.length;
    var nextCamera = cameras[nextCameraIndex];
    setCurrentCamera(nextCamera);
    updateCurrentCameraCaption(nextCamera);
  }

// 現在のカメラを取得
function getCurrentCamera() {
  return localStorage.getItem('currentCamera') || cameras[0]; // 初期値をcameras配列の先頭に設定
}

  // カメラを設定
  function setCurrentCamera(camera) {
    localStorage.setItem('currentCamera', camera);
    var videoSrc = 'https://st1.ctc.co.jp/edge/' + camera + '/playlist.m3u8';

    if (Hls.isSupported()) {
      var hls = new Hls(config);
      hls.loadSource(videoSrc);
      hls.attachMedia(video);
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = videoSrc;
    }
  }

  // カメラのキャプションを更新
  function updateCurrentCameraCaption(camera) {
    currentCameraCaption.innerText = '現在のカメラ: ' + camera;
  }

  // 初回のスケジュールを設定
  scheduleCameraSwitch();
</script>

上のスクリプト中の

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

については、テーマエディタでCocoon Child→head-insert.phpへ記述して、ここでは省略することも可能です。

この投稿において、以下に動画が表示される時は、右のサイドバーには表示されなくなります。↓

名古屋港水族館のご案内

以上です。

↑広告-Google AdSense-