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

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ソースコードの取り出し方

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

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

超簡単です！

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

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

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

＜ソースコードサンプル＞

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

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>

<script>
  var videoSrc = 'https://st1.ctc.co.jp/edge/coralreef/playlist.m3u8';
  var video = document.getElementById("hls");
      video.volume = 0.5;
var config = {maxBufferLength: 12,maxBufferSize: 10 * 1000 * 1000
};
  if (Hls.isSupported()) {
    var hls = new Hls(config);
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
  }
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    var hls = new Hls(config);
    video.src = videoSrc;
  }
</script>

上のスクリプト中の

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

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

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

名古屋港水族館のご案内

以上です。

↓広告- Google AdSense -
↑広告-Google AdSense-