オリジナルVideoタグ

2025年 01月08日 Video

デフォルト属性

src=””	video source
poster=””	eyecatch image
muted	mute
autoplay	auto playing
loop	loop playing
controls	display control buttons

再生ボタン・停止ボタン

<video id='video' src='xxx.mp4'></video>
<button id='play'>▶</button>
<button id='pause'>＝</button>

<script>
var video = document.getElementById('video');
var play = document.getElementById('play');
var pause = document.getElementById('pause');

play.addEventListener('click', ()=>{
    video.play();
});
pause.addEventListener('click', ()=>{
    video.pause();
});
</script>

巻き戻しボタン

<video id='video' src='xxx.mp4'></video>
<button id='playbackAll'>0</button>
<button id='playback30'>30</button>

<script>
var video = document.getElementById('video');
var playbackAll = document.getElementById('playbackAll');
var playback30 = document.getElementById('playback30');

playbackAll.addEventListener('click', ()=> {
    video.currentTime = 0;
});
playback30.addEventListener('click', ()=>{
    video.currentTime = Math.max(0, video.currentTime - 30);
});

</script>

音量の上げ下げボタン

<video id='video' src='xxx.mp4'></video>
<button id='volumeUp'>＋</button>
<button id='volumeDown'>－</button>
<button id='volumeMute'>x</button>

<script>
var video = document.getElementById('video');
var volumeUp = document.getElementById('volumeUp');
var volumeDown = document.getElementById('volumeDown');
var volumeMute = document.getElementById('volumeMute');

volumeUP.addEventListener('click', ()=>{
    if (video.volume <= 0.75) {
        video.volume = video.volume + 0.25;
    }
    video.text(video.volume);
});
volumeDown.addEventListener('click', ()=>{
    video.volume = video.volume - 0.25;
    video.text(video.volume)
});
volumeMute.addEventListener('click', ()=>{
    video.muted = video.muted ? false : true;
});
</script>

再生時間・プログレスバー

<video id='video' src='xxx.mp4'></video>
<span id='cTime'></span><span id='duration'></span>
<progress id='progress' value='0' max='100'></progress>

<script>
var video = document.getElementById('video');
var cTime = document.getElementById('cTime');
var duration = document.getElementById('duration');
var progress = document.getElementById('progress');

video.addEventListener('timeupdate', ()=>{
    min = Math.floor(video.currentTime / 60);
    sec = Math.floor(video.currentTime - min * 60);
    cTime.innerText = min + ':' + sec;
});
video.addEventListener('timeupdate', ()=>{
    min = Math.floor(video.duration / 60);
    sec = Math.floor(video.duration - min * 60);
    duration.innerText = min + ':' + sec;
});
video.addEventListener('timeupdate', ()=>{
    progress.value = video.currentTime / video.duration * 100;
});
progress.addEventListener('click', ()=>{
    const percent = (e.pageX - (progress.getBoundingClientRect().left + window.pageXOffset)) / progress.clientWidth;
    video.currentTime = video.duration * percent;
});
</script>

フルスクリーン（スマホで自動回転）

JavascriptのフルスクリーンAPIを使う

<video id='video' src='xxx.mp4'></video>
<button id='fullScreen'>▢</button>

<script>
var video = document.getElementById('video');
var fullscreen = document.getElementById('fullscreen');

fullscreen.addEventLisnter('click', ()=>{
    if (video.requestFullscreen) {
        video.requestFullscreen();
    } else if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen(); // safari用
    } else {
        alert('このブラウザではフルスクリーン機能がサポートされていません');
    }
});
</script>

ホームに戻る