javascript - Streaming live video in HTML5 and with HLS - Stack Overflow

admin管理员组

文章数量:1312692

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');

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');

• javascript
• html
• http-live-streaming

Share Improve this question Follow asked Mar 20, 2018 at 9:55 GallexGallex 32133 gold badges88 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

correct working code:

 <script src="https://cdn.jsdelivr/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.

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/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');

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

crossOrigin="anonymous"

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

muted

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

type="application/x-mpegURL"

Putting it all together the HTML player bees...

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

本文标签： javascriptStreaming live video in HTML5 and with HLSStack Overflow