HTMLで動画や画像をループ再生しようと思います。
基本的には動画は終わったら次を再生、画像は5秒固定でループ再生させます。ここで問題が出てきました。2つの領域で再生させるとズレてくるのです。その解決方法も紹介します。
| 時間 | 領域１ | 領域２ | |
|---|---|---|---|
| 0秒 | 10秒動画 | 画像１ | |
| 5秒 | ↓↓↓ | 画像２ | |
| 10秒 | 画像３ | 画像３ | 同時に再生して欲しい |
① 領域がズレる方法
② 領域がズレない方法
① 領域がズレる方法
メリット
動画が終わった次を再生するため動画の長さを知る必要がない。
デメリット
領域同士がズレていく。
<!DOCTYPE html>
<html>
<video class='pos1' id="video1" src="" autoplay muted></video>
<img class='pos1' id="image1" src=""></img>
<video class='pos2' id="video2" src="" autoplay muted></video>
<img class='pos2' id="image2" src=""></img>
<script>
const video1 = document.getElementById('video1');
const image1 = document.getElementById('image1');
const video2 = document.getElementById('video2');
const image2 = document.getElementById('image2');
const list1 = ['video1.mp4', 'image3.jpg'];
const list2 = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
let index1 = -1;
let index2 = -1;
window.onload = function() {
play1();
play2();
};
video1.addEventListener('ended', function() {
play1();
});
video2.addEventListener('ended', function() {
play2();
});
function isImage(filename) {
var ext = filename.split('.').pop();
return (ext==='jpg');
}
var play1 = function(){
index1++;
if (index1 >= list1.length) {
index1 = 0;
}
var f = list1[index1];
if (isImage(f)) {
image1.style.visibility = "visible";
video1.style.visibility = "hidden";
image1.src = f;
setTimeout(play1, 5000);
} else {
video1.style.visibility = "visible";
image1.style.visibility = "hidden";
video1.src = f;
video1.play();
}
}
var play2 = function(){
index2++;
if (index2 >= list2.length) {
index2 = 0;
}
var f = list2[index2];
if (isImage(f)) {
image2.style.visibility = "visible";
video2.style.visibility = "hidden";
image2.src = f;
setTimeout(play2, 5000);
} else {
video2.style.visibility = "visible";
image2.style.visibility = "hidden";
video2.src = f;
video2.play();
}
}
</script>
<style>
video{ width: 100%; height: 100%; object-fit: fill; }
.pos1{ top: 0px; left: 0px; width :320px; height: 180px; background-color: black; position: absolute; }
.pos2{ top: 0px; left: 320px; width :320px; height: 180px; background-color: black; position: absolute; }
</style>
</html>
② 領域がズレない方法
メリット
領域がズレない。
デメリット
動画が17秒や35秒など自由にできない。
<!DOCTYPE html>
<html>
<video class='pos1' id="video1" src="" autoplay muted></video>
<img class='pos1' id="image1" src=""></img>
<video class='pos2' id="video2" src="" autoplay muted></video>
<img class='pos2' id="image2" src=""></img>
<script>
const video1 = document.getElementById('video1');
const image1 = document.getElementById('image1');
const video2 = document.getElementById('video2');
const image2 = document.getElementById('image2');
window.onload = function() {
play();
};
function play(){
setTimeout(function(){play1('video1.mp4')}, 0);
setTimeout(function(){play1('image3.jpg')}, 10000);
setTimeout(function(){play2('image1.jpg')}, 0);
setTimeout(function(){play2('image2.jpg')}, 5000);
setTimeout(function(){play2('image3.jpg')}, 10000);
setTimeout(play, 15000)
}
function isImage(filename) {
var ext = filename.split('.').pop();
return (ext==='jpg');
}
function play1(f){
if (isImage(f)) {
image1.style.visibility = "visible";
video1.style.visibility = "hidden";
image1.src = f;
} else {
video1.style.visibility = "visible";
image1.style.visibility = "hidden";
video1.src = f;
video1.play();
}
}
function play2(f){
if (isImage(f)) {
image2.style.visibility = "visible";
video2.style.visibility = "hidden";
image2.src = f;
} else {
video2.style.visibility = "visible";
image2.style.visibility = "hidden";
video2.src = f;
video2.play();
}
}
</script>
<style>
video{ width: 100%; height: 100%; object-fit: fill; }
.pos1{ top: 0px; left: 0px; width :320px; height: 180px; background-color: black; position: absolute; }
.pos2{ top: 0px; left: 320px; width :320px; height: 180px; background-color: black; position: absolute; }
</style>
</html>
まとめ
HTMLによるレイアウト再生を紹介しました。
デジタルサイネージでSMILプレイヤーというものを使っています。動画の切替がミリ秒単位で制御されとても綺麗です。しかし値段が高すぎる。
今回の記事でHTMLでも切替によるミリ秒単位の同期はできないため、放送などには使用できません。しかしここまで出来るようになっています。
SMILとHTMLの二刀流でいくのが正解ですかね。