使用clappr player和SMIL播放多路rtmp视频流

  • 内容
  • 相关

主要用到clappr播放器主体,clappr-rtmp-plugin(支持rtmp流和.smil文件),clappr-lever-selector-plugin(实现播放器的切换功能)。

源码地址分别如下:

https://github.com/clappr/clappr

https://github.com/video-dev/clappr-rtmp-plugin

https://github.com/clappr/clappr-level-selector-plugin

smil文件用于多个rtmp流的dynamic streaming

播放页面主要代码如下

<html>
<head>
 
  <script src="https://cdn.jsdelivr.net/clappr/latest/clappr.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/video-dev/clappr-rtmp-plugin@latest/dist/rtmp.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/clappr.level-selector/latest/level-selector.min.js"></script>
</head>
 
<body>
  <div id="player"></div>
  <script>
    var player = new Clappr.Player({
    source: "http://172.16.24.235/vod/elephants_dream.smil",
    <!-- source: "http://www.streambox.fr/playlists/test_001/stream.m3u8" -->
    parentId: "#player",
    plugins: {'playback': [RTMP],'core': [LevelSelector]},
    rtmpConfig: {
        swfPath: 'RTMP.swf',
        scaling:'stretch',
        playbackType: 'live',
        bufferTime: 1,
        startLevel: 0        
    },
});
  </script>
</body>
</html>

.smil文件内容如下:

<smil>
  <head>
    <meta base="rtmp://cp67126.edgefcs.net/ondemand" />
  </head>
  <body>
    <switch>
      <video src="mp4:mediapm/ovp/content/demo/video/elephants_dream/elephants_dream_768x428_24.0fps_408kbps.mp4" system-bitrate="408000"/>
      <video src="mp4:mediapm/ovp/content/demo/video/elephants_dream/elephants_dream_768x428_24.0fps_608kbps.mp4" system-bitrate="608000"/>
      <video src="mp4:mediapm/ovp/content/demo/video/elephants_dream/elephants_dream_1024x522_24.0fps_908kbps.mp4" system-bitrate="908000"/>
      <video src="mp4:mediapm/ovp/content/demo/video/elephants_dream/elephants_dream_1024x522_24.0fps_1308kbps.mp4" system-bitrate="1308000"/>
      <video src="mp4:mediapm/ovp/content/demo/video/elephants_dream/elephants_dream_1280x720_24.0fps_1708kbps.mp4" system-bitrate="1708000"/>
    </switch>
  </body>
</smil>

这个smil文件里面是点播地址,换成直播流也是类似格式


碰到的问题:

1. 如果想利用smil进行rtmp流自适应切换,服务器貌似只能用adobe自己的Flash Media Server?  

2. 碰到一个小问题,smil文件和html文件放在同一路径下时,当.smil文件名为test时,无法正常播放,改为其他名字如test1或者test_ 则可以正常播放。目前还不知道原因。

本文标签:

版权声明:若无特殊注明,本文皆为《alen》原创,转载请保留文章出处。

本文链接:使用clappr player和SMIL播放多路rtmp视频流 - https://laoyl.wang/clapprplayer.html