m3u8 format Support
Opened this issue · 1 comments
naumanahmed19 commented
Currently player does not support the m3u8 format
A possible solution can be found here
katspaugh/wavesurfer.js#1078
salginci commented
This is how I made it working. I was using online radio stream.
I removed playpause button click event in main.js file. and I added this in to player area(header-player.php).
<audio id="radioplayer" src='https://myawesomeradyostream.m3u8' style="display:none;" controls></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<!-- Or if you want a more recent alpha version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@alpha"></script> -->
<style>
#previousTrack
{
display:none;
}
#nextTrack
{
display:none;
}
</style>
<script>
var video = document.getElementById('radyoplayer');
var videoSrc = 'https://myawesomeradyostream.m3u8';
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video);
}
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoSrc;
}
var isPlaying=false;
jQuery(document).ready(function ($) {
var playPause = document.querySelector("#playPause");
playPause.addEventListener("click", function (e) {
e.preventDefault();
if (isPlaying==false)
{
console.log('playin');
document.querySelector("#play").style.display = "none";
document.querySelector("#pause").style.display = "";
video.play();
$(".music_pseudo_bars").show();
} else
{
video.pause();
console.log('not playing');
document.querySelector("#play").style.display = "";
document.querySelector("#pause").style.display = "none";
$(".music_pseudo_bars").hide();
}
isPlaying=!isPlaying;
return;
});
});
</script>
```
`