CODEWITHSUNDEEP
javascripthtmlhttp-live-streaming
Gallex
Gallex

Reputation: 321

Streaming live video in HTML5 and with HLS

I wish to stream live video in my https website from this http site.

Added reference of hls.min.js into my template. Copy-pasted their code:

<video id="video" width="320" height="240" controls autoplay 
class="videoCentered"></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('/hls/metsis.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
  video.play();
});
}
</script>

into my template, but the player doesn't start to stream. browser console says:

Uncaught ReferenceError: Hls is not defined

Where exactly is reference error? Here?

hls.loadSource('/hls/metsis.m3u8');

Upvotes: 2

Views: 16843

Answers (3)

passThru
passThru

Reputation: 1

You need a crossorigin attribute to handle insecure urls...

crossOrigin="anonymous"

And a muted attribute so that autoplay will function...

muted

For HLS standard/compatibility I would also add a type attribute...

type="application/x-mpegURL"

Putting it all together the HTML player becomes...

<video id="video" type="application/x-mpegURL" crossOrigin="anonymous" class="videoCentered" width="100%" height="380" muted controls autoplay></video>

Upvotes: 0

Gallex
Gallex

Reputation: 321

correct working code:

 <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
 <video id="video" width="100%" height="380" controls autoplay 
class="videoCentered"></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('http://tv.eenet.ee/hls/metsis.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
  video.play();
});
}
</script>

but browser blocks it, because the content must be served over https if my page is loaded over https.

Upvotes: 4

AurA
AurA

Reputation: 12373

You are getting this error as you are trying to access Hls without importing it. Please import it using the following way

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

A more detailed example can be seen at Getting Started section of HLS documentation

Also, Add the correct reference 

hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');

Upvotes: 0

Related Questions