I have tried to play in a web page a m3u8 file streaming with video.js, But I could not do it, I do not know where the mistake is
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Video</title>
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<script src="https://github.com/videojs/videojs-contrib-media-sources/releases/download/v0.1.0/videojs-media-sources.js"></script>
<script src="https://github.com/videojs/videojs-contrib-hls/releases/download/v0.11.2/videojs.hls.min.js"></script>
</head>
<body>
<h1>Video</h1>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
data-setup='{}'>
<source src="http://iphone-streaming.ustream.tv/uhls/3064708/streams/live/iphone/playlist.m3u8" type='video/mp4'>
</video>
<script>
</script>
</body>
</html>
Instead of type='video/mp4' you need type='application/x-mpegURL'.
Check also if cross-domain requests are allowed (CORS).
Hosting Considerations
Unlike a native HLS implementation, the HLS tech has to comply with
the browser's security policies. That means that all the files that
make up the stream must be served from the same domain as the page
hosting the video player or from a server that has appropriate CORS
headers configured. Easy instructions are available for popular
webservers and most CDNs should have no trouble turning CORS on for
your account.
Source: https://github.com/videojs/videojs-contrib-hls
CORS How-To: http://enable-cors.org/server.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Video</title>
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<script src="https://github.com/videojs/videojs-contrib-media-sources/releases/download/v0.1.0/videojs-media-sources.js"></script>
<script src="https://github.com/videojs/videojs-contrib-hls/releases/download/v0.11.2/videojs.hls.min.js"></script>
</head>
<body>
<h1>Video</h1>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
data-setup='{}'>
<source src="http://iphone-streaming.ustream.tv/uhls/3064708/streams/live/iphone/playlist.m3u8" type='application/x-mpegURL'>
</video>
<script>
var player = videojs('my_video_1');
</script>
</body>
</html>
<!-- Replace current .m3u8 and check..current file has access issue-->
I found two of the most powerful hls library for video js
1.videojs-http-streaming
This library has been generated from videojs-contrib-hls Based on the following description
Notice: this project will be deprecated and is succeeded by videojs-http-streaming. VHS supports HLS and DASH and is built into video.js 7, see the video.js 7 blog post
The short description of videojs-http-streaming library is as follows
Play HLS, DASH, and future HTTP streaming protocols with video.js, even where they're not natively supported.
Included in video.js 7 by default!.
Github link: https://github.com/yanwsh/videojs-panorama
2.videojs-hlsjs-plugin
The short description of this library is as follows
Adds HLS playback support to video.js 5.0+ using hls.js library.
The library's strength in using it from the hls.js library
videojs-hlsjs-plugin github link : https://github.com/streamroot/videojs-hlsjs-plugin
hls.js github link : https://github.com/video-dev/hls.js/
conclusion
I used projects from both of these libraries and my experience in using them is that videojs-hlsjs-plugin library is due to using a powerful hls.js library can be a great option for large projects.
