【JavaScript】videoタグにオリジナルの再生ボタンを設置する方法

前提
【サンプル】videoタグにオリジナルの再生ボタンを設置
【実装コード】videoタグにオリジナルの再生ボタンを設置

ブラウザによってvideoタグの再生ボタンのデザインが違っていたり、再生ボタンが表示されないことがあるためオリジナルの再生ボタンを設置する方法を解説します。

実務で時々使用するためコピペで実装できるようにまとめました。

前提

videoタグの再生ボタンは、動画のコントロールバーを表示するためのcontrols属性によって表示されます。

しかし、ブラウザによって再生ボタンのデザインが違っていたり、Chromeだと再生ボタンが表示されないなどの差異があります。

この記事では、JavaScript使用して再生停止中はcontrols属性を削除、再生中はcontrols属性を付与して、オリジナル再生ボタンの表示・非表示を制御しています。

【サンプル】videoタグにオリジナルの再生ボタンを設置

【実装コード】videoタグにオリジナルの再生ボタンを設置

HTML

Copy

<div class="movie">
<video class="movie_video" src="動画URL" playsinline></video>
<img class="movie_btn" src="再生ボタン画像URL" alt="再生ボタン">
</div>

CSS

Copy

.movie {
display: inline-block;
position: relative;
}
.movie_video {
max-width: 100%;
height: auto;
}
.movie_btn {
width: 60px;
height: 60px;
border-radius: 100%;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}

JavaSctipt

Copy

// 対象のvideoタグを取得
let video = document.querySelectorAll('.movie_video');
// フルスクリーン判定
let fullscreenFlag = false;
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // Safari用
document.addEventListener('mozfullscreenchange', handleFullscreenChange); // 古いFirefox用
function handleFullscreenChange() {
const isFullscreen = document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement;
if (isFullscreen) {
// フルスクリーン時
fullscreenFlag = true;
} else {
// フルスクリーン解除時
fullscreenFlag = false;
video.forEach(function(element) {
if (element.paused) {
element.removeAttribute('controls', '');
}
});
}
}
video.forEach(function(element) {
// 再生時の処理
element.addEventListener('playing', function() {
this.nextElementSibling.style.display = 'none';
this.setAttribute('controls', '');
});
// 再生停止時の処理
element.addEventListener('pause', function() {
if (!this.seeking) {
if (!fullscreenFlag) {
this.removeAttribute('controls', '');
}
this.nextElementSibling.style.display = 'block';
}
});
// フルスクリーン以外でvideoタグクリック時に、再生されてなければ再生開始
element.addEventListener('click', function() {
if (this.paused && !fullscreenFlag) {
this.play();
}
});
// 再生ボタンクリック時に、再生開始
element.nextElementSibling.addEventListener('click', function() {
if (this.previousElementSibling.paused) {
this.previousElementSibling.play();
}
});
});