更新进度

• 2017年04月18日 星期二 解决VideoJs阿里云直播和点播跨域问题

详细介绍

• 以下测试延迟多为局域网测试环境（线上为阿里云平台测试）

• M3U8 直播或者点播DEMO

• VideoJs-M3U8

  • 1、支持直播流：HSL的 m3u8
  • 2、如何使用：直接下载即可使用,注意点： m3u8 播放必须放在服务器下面
  • 3、默认：m3u8播放
  • 4、延迟测试(局域网测试)
    • RTMP 延迟：2s
    • HLS 延迟： 18s
    • VLC 延迟(不推荐)： 18s
  • 5、鉴权：可以
  • 皮肤支持

    • 官方皮肤

    • YouTouBe

      • 

    • facebook-player

      • 

• m3u8-IE-Support

  • 兼容所有浏览器
  • 支持IE11 浏览器播放
  • 测试结果：通过

• VideoJs2017

  • 1、RTMP 支持播放

  • 2、支持鉴权

  • 3、M3U8 IE 暂时不支持播放

  • 4、延迟测试(局域网测试)

    • RTMP 延迟：2s
    • HLS 延迟： 18s
    • VLC 延迟(不推荐)： 18s

  • 测试播放列表

    • [1] RTMP直播流：rtmp-stream.html
    • [2] HLS直播和点播：hls-stream.html
    • [3] 直播和点播HLS的M3U8播放(可输入动态改变HLS地址)：auto-input-hls-player.html
      • 遇到JS跨域的问题：
        • The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://127.0.0.1
      • 解决办法(Nginx 服务器配置方法，Apache自行百度)：

      location /record {
          add_header Cache-Control no-cache;
          add_header 'Access-Control-Allow-Origin' '*' always;
          add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
          add_header 'Access-Control-Allow-Headers' 'Range';
          types{
                  application/dash+xml mpd;
                  application/vnd.apple.mpegurl m3u8;
                  video/mp2t ts;
           }
          alias /home/tinywan/hls;
       }
      
      

      • 测试地址：http://192.168.18.143/record/stream_name/index.m3u8

  • 测试进度

    • [2017年4月10日 下午 16:00 ] 局域网的HSL和RTMP流延迟的测试

      测试结果：RTMP 延迟：2s ，HLS 延迟： 18s

    • [2017年4月11日 下午 13:00 ] 直播和点播HLS的M3U8播放(可输入动态改变HLS地址),JS 跨域问题

RTMP and M3U8 直播

• Play-RTMP-HLS-Stream(Obj-Flash)
  • 1、支持直播流：播放RTMP直播流和HSL直播流
  • 2、如何使用：直接下载即可使用,注意点： m3u8 播放必须放在服务器下面
  • 3、默认：RTMP播放
  • 4、延迟：
    • RTMP 延迟：3s
    • HLS 延迟： 20s
    • VLC 延迟(不推荐)： 18s
  • 5、跨域：OK
  • 6、鉴权：不可以
  • 测试进度
    • [2017年4月10日 下午 16:00 ] 局域网的HSL和RTMP流延迟的测试

      测试结果：RTMP 延迟：3s ，HLS 延迟： 20s

Video-dev-Hls

• https://github.com/video-dev/hls.js
• 测试案例

(Push)Play-RTMP-Info (功能比较强大)

• 播放RTMP直播流,同时显示直播流的详细信息
• 探索中...