Since some days I am trying to get a video source in m3u8 format running as html in the browser. I researched alot and couldn´t find a working solution. When I was about to quit I accidently found out that the code I have is running on my macbook (before I was developing and testing on a windows machine)...on every browser. So again I started to research, but still no solution. I know that there is a solution, because the video source I am trying to play is scraped from a website in which I can watch the video on any plattform. So I tryed to investigate the source website a bit more and found out that it is using jwplayer. Still not able to get it run.
So that is my current HTML-Code (which is running in macos -> Chrome, Safari and Firefox:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<style>
LEFT OUT BECAUSE OF LINE LIMIT AT STACKOVERFLOW
</style>
</head>
<body>
<video id="video" style="width: 100%; height: 100%;" controls></video>
<script>
function playM3u8(url){
if(Hls.isSupported()) {
var video = document.getElementById('video');
video.volume = 1.0;
var hls = new Hls();
var m3u8Url = decodeURIComponent(url)
hls.loadSource(m3u8Url);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = url;
video.addEventListener('loadedmetadata', function() {
video.play();
});
}
}
playM3u8("https://load.hdfilme.ws/hls/9618d6f005e7bf049e324b543727184e/9618d6f005e7bf049e324b543727184e.m3u8")
</script>
</body>
</html>
Research:
How do i embed this m3u8 into jw player
How do we download a blob url video
Playing m3u8 Files with HTML Video Tag
And alot more but don´t want to spam in here...
Someone knows how to solve that and get the video playing on every plattform? Which player to use and how do the code for that look like? Many thanks in advance!
