Playing with video.js ustream m3u8 file streaming

后端 未结 3 2303
时光取名叫无心
时光取名叫无心 2021-02-14 22:13

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




        
相关标签:
3条回答
  • 2021-02-14 22:34

    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)
  • 2021-02-14 22:37
    <!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)
  • 2021-02-14 22:46

    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)
提交回复
热议问题