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ソースコードの取り出し方
貼り付けた動画をクリックすると、バーに点３つのマーク→HTMLとして編集、を選びます。
ソースコードが表示されます。これをコピーします。単にコピーするだけで何も変更しませんので、ご注意ください。
超簡単です！
<3> 名古屋港水族館のライブ映像をサイドバーへ載せるには。
〜ライブストリーミング配信〜
珍しく、名古屋港水族館はライブ配信を行っています（いつまでサービスを行ってくれるかわかりませんが）。この中からライブカメラのURL(※1)をカスタムHTMLブロックへ貼り付けると、以下になります。これをウイジェットのカスタムHTMLへコピー＆ペーストすると、なかなかオシャレになります。ただし、以下のソースコードは、JAVA無料サービスのjsDeliverを利用しているため、いつまでも使用できるとは限りません。
※1:URLは時々変更されているようです。Macの場合は、再生中のライブ動画の上で右クリック→ビデオアドレスをコピーします。
＜ソースコードサンプル＞
“サムネのURL”は、現状、自動開始にしてあるため、必要ありませんが、autoplay=””を削除した場合は、登録しておいた方が見栄えはいいです。
日本時間で日付が変わった時、カメラが移動します。
初期設定は、2024年2月23日に配列の先頭からスタートするように設定してあります。７種類ですと曜日とカメラが一致してしまうため、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へ記述して、ここでは省略することも可能です。
この投稿において、以下に動画が表示される時は、右のサイドバーには表示されなくなります。↓
名古屋港水族館のご案内以上です。