HTML u3m8 播放器<(。_。)>
闲得无聊手搓了一个zzz
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<video controls>
<source src="test/playlist.m3u8" type="application/x-mpegURL">
</video>
</body>
<script>
var video = document.getElementsByTagName("video")[0]
var source = video.getElementsByTagName("source")[0].getAttribute("src")
var m3u8ArrayList = new Array
var frameForNow = 0
console.log(source)
async function getM3u8() {
return await axios.get(source)
.then(res => {
return res.data
})
.catch(err => {
console.error(err);
})
}
getM3u8().then(result => {
var videoLength = 0
result.split("
").forEach(element => {
if (element.includes("#EXTINF")) {
console.log(element);
videoLength += parseFloat(element.substring(8))
} if (element.includes(".mp4")) {
m3u8ArrayList.push(element)
}
});
console.log(videoLength);
var source = document.createElement("source")
source.setAttribute("id", "freameSource")
video.appendChild(source)
changeSource()
})
video.addEventListener("ended", () => {
// video.addAttribute("autoplay")
changeSource()
video.play()
})
function changeSource() {
document.getElementById("freameSource").setAttribute("src", "test/" + m3u8ArrayList[frameForNow++])
video.load()
}
</script>
</html>
啊?什么,你问我换个影片怎么办?
我现在懒得改,之后有机会再出第二版吧_(:з」∠)_
啊我就不信了我HTML还能出bug