CODEWITHSUNDEEP
htmlvideo-streaminghtml5-videovideo.jsm3u8
Lesic
Lesic

Reputation: 136

HTML video player wont play stream

So what I'm trying to do is have a html video player play a m3u8 stream. I have tried multiple players and none of them seems to be able to play the stream. Normally I would be thinking that the stream is not working, but VLC plays it just fine.

Here is just one snippet I have tried it with: 

<html>
    <head>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.10.2/alt/video-js-cdn.css" rel="stylesheet">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.10.2/video.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/3.0.2/videojs-contrib-hls.js"></script>
    </head>
    <body>
        <video class="video-js vjs-default-skin" controls autoplay>
            <source src="https://list.iptvcat.com/my_list/s/be001cbd19007cd3d1da1cf3e39b425a.m3u8" type="application/x-mpegURL">
        </video>
    </body>
</html>

Does anyone have an idea what I'm doing wrong and maybe what VLC does that I am not doing?

Upvotes: 0

Views: 1709

Answers (1)

VC.One
VC.One

Reputation: 15871

"I have tried multiple players and none of them seems to be able to play the stream".

Your video is coming from an HTTP link but your player/server are running in HTTPS.
Browsers do not like processing mixed content (secure vs non-secure URL) in the same page.

Explained:

Solution is to use a PHP script running from your HTTPS server to readFile the video link back to your MPEG-TS video player. Your player will see the .src as being from your server (is the PHP file) but obviously that same PHP script is just streaming back the video bytes it reads from the other HTTP link.
PHP does not care about HTTP vs HTTPS, it just reads file bytes if they exist.

(2) Your code is incomplete... You need to assign the video tag (by its ID) to VideoJS.

<html>
    <head>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.10.2/alt/video-js-cdn.css" rel="stylesheet">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.10.2/video.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/3.0.2/videojs-contrib-hls.js"></script>
    </head>
    <body>
        <video id="myVideo" class="video-js vjs-default-skin" controls autoplay>
            <source src="https://list.iptvcat.com/my_list/s/be001cbd19007cd3d1da1cf3e39b425a.m3u8" type="application/x-mpegURL">
        </video>
    </body>
    
    <script>
    
    var player = videojs("myVideo");
    //player.play(); //# test playback
    
    </script>
    
</html>

Upvotes: 1

Related Questions