htm5 video src in m3u8 is not playing in Chrome

Question

i am following github: https://github.com/videojs/videojs-contrib-hls#getting-started and also followed that post How to play html5 video play m3U8 on mobile and desktop? for streaming m3u8 in chrome. But i am failed to understand why this is not happening. I always get error message invalid source on the media player.

<!DOCTYPE html>
<html>
<head>
    <title>Video</title>
    <meta charset="utf-8" />
    <style>
        body {
            background: brown;
            color: #CCCCCC;
        }
    </style>

    <script src="video.js"></script>
    <script src="videojs.hls.min.js"></script>
    <script>
    var player = videojs('example-video');
    player.play();
    </script>
</head>
<body>
    <video id=example-video width=960 height=540 class="video-js vjs-default-skin" controls>
  <source
     src="http://esioslive6-i.akamaihd.net/hls/live/202874/AL_P_ESP1_INTER_ENG/playlist_1000.m3u8"
     type="application/x-mpegURL">
</video>

</body>
</html>

here is the directory. and i ve downloaded videojs-contrib-hlsand videojs-contrib-hls.min from here https://github.com/videojs/videojs-contrib-hls/releases

Also when i checked from chrome console i found errors which i tried to resolve but fail. Error:

Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///C:/Users/MIC/Desktop/sss/videojs.hls.min.js Failed to load resource: net::ERR_FILE_NOT_FOUND
index.html:16 Uncaught ReferenceError: videojs is not defined

Any idea where i am doing wrong?

score 0 · Answer 1 · answered Sep 30 '16 at 20:34

Try use the full path of the js references:

In your case, would be:

<script src="file:///C:/Users/MIC/Desktop/sss/video.js"></script>
<script src="file:///C:/Users/MIC/Desktop/sss/videojs.hls.min.js"></script>

And also check the Network tab in the F12 developer tool for check if the js files (resources) are loaded.

htm5 video src in m3u8 is not playing in Chrome

1 Answers1