hls.jsで動画の再生位置を指定して再生する方法 - poccariswet / soe

hls.jsで動画の再生位置を指定して再生する方法

#hls #video #streaming

簡単に言うと、video要素を取得して要素の currentTime適当な値に更新した上で再生する

code:index.html

<html>

<head>

<title>Hls.js demo - basic usage</title>

</head>

<body>

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

<center>

<h1>Hls.js demo - basic usage</h1>

<video height="600" id="video" controls></video>

</center>

<script>

var video = document.getElementById('video');

if (Hls.isSupported()) {

var hls = new Hls({

debug: true,

});

hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');

hls.attachMedia(video);

hls.on(Hls.Events.MEDIA_ATTACHED, function () {

t = getParam('t');

var currentTime = 0;

if(t) {

currentTime = parseInt(t, 10);

}

video.muted = true;

video.currentTime = currentTime;

video.play();

});

}

function getParam(name, url) {

// URLを取得

if (!url) url = new URL(window.location.href);

// URLSearchParamsオブジェクトを取得

var params = url.searchParams;

return params.get(name);

}

</script>

</body>

</html>