Playing with video.js ustream m3u8 file streaming

2020-06-16 05:28发布

站内问答 / JavaScript
1795 3 2

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>

3条回答
Ridiculous、
2楼-- · 2020-06-16 05:54 
<!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-->
查看更多
0人赞 添加讨论(0) 举报
看我几分像从前
3楼-- · 2020-06-16 05:54

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.

查看更多
0人赞 添加讨论(0) 举报
戒情不戒烟
4楼-- · 2020-06-16 06:00

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)