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=””を削除した場合は、登録しておいた方が見栄えはいいです。
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へ記述して、ここでは省略することも可能です。
この投稿において、以下に動画が表示される時は、右のサイドバーには表示されなくなります。↓
名古屋港水族館のご案内以上です。