懂 HTML 的人可以为我编写一个简单的 m3u8 视频播放器吗？
音频：https://miraculous12dec.b-cdn.net/eps/miraculum/s5/501/audio/tr/501_tr.m3u8
视频：https://miraculous12dec.b-cdn.net/eps/miraculum/s5/501/video/501.m3u8 我希望音频和视频同步工作，因为它们属于在一起。预先感谢任何可以提供帮助的人。
字符限制：101010101101100101101010101010010101010110010110100110101010101010101010111110001010101100101010102020202
我组合了两个脚本以使其工作。
这是：
//<![CDATA[
var medias = {
audio: Popcorn("#audio"),
video: Popcorn("#video")
},
loadCount = 0,
events = "play pause timeupdate seeking".split(/\s+/g);
// iterate both media sources
Popcorn.forEach(medias, function(media, type) {
// when each is ready...
media.on("canplayall", function() {
// trigger a custom "sync" event
this.emit("sync");
// Listen for the custom sync event...
}).on("sync", function() {
// Once both items are loaded, sync events
if (++loadCount == 2) {
// Uncomment this line to silence the video
//medias.video.mute();
// Iterate all events and trigger them on the video
// whenever they occur on the audio
events.forEach(function(event) {
medias.audio.on(event, function() {
// Avoid overkill events, trigger timeupdate manually
if (event === "timeupdate") {
if (!this.media.paused) {
return;
}
medias.video.emit("timeupdate");
return;
}
if (event === "seeking") {
medias.video.currentTime(this.currentTime());
}
if (event === "play" || event === "pause") {
medias.video[event]();
}
});
});
}
});
});
//]]>.video-js {
position: relative;
}
#audio>button {
margin: auto;
position: absolute;
top: -300px;
left: 0;
bottom: 0;
right: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//code.jquery.com/jquery-git.js"></script>
<script type="text/javascript" src="https://static.bocoup.com/js/popcorn.min.js"></script>
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
</head>
<body onLoad="audioPlz(); videoPlz();">
<video id='video' controls class="video-js vjs-default-skin" style="height: 300px;width: 100%;">
<source type="application/x-mpegURL" src="https://miraculous12dec.b-cdn.net/eps/miraculum/s5/501/video/501.m3u8">
</video>
<audio id="audio" preload="auto" class="video-js vjs-default-skin" style="height: 0px;width: 100%;">
<source src="https://miraculous12dec.b-cdn.net/eps/miraculum/s5/501/audio/tr/501_tr.m3u8" type="application/x-mpegURL" />
</audio>
<script>
function videoPlz() {
var video = videojs('#video', {
controls: false
}, {
'nativeAudioTracks': false,
'nativeVideoTracks': false,
'hls': {
'overrideNative': true
}
});
player.playsinline(true);
}
function audioPlz() {
var audio = videojs('#audio', {
controls: true
}, {
'nativeAudioTracks': false,
'nativeVideoTracks': false,
'hls': {
'overrideNative': true
}
});
audio.playsinline(true);
}
</script>
</body>
</html>