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

最新推荐文章于 2024-08-10 07:18:45 发布

zhoudegui88

最新推荐文章于 2024-08-10 07:18:45 发布

阅读量5.3k

点赞数

本文链接：https://blog.csdn.net/zhoudegui88/article/details/78690106

版权

视频直播专栏收录该内容

1 篇文章 0 订阅

订阅专栏

主要用到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

相关参考链接

https://forums.adobe.com/thread/422712

http://www.adobe.com/devnet/adobe-media-server/articles/dynstream_advanced_pt1.html

播放页面主要代码如下

<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_ 则可以正常播放。目前还不知道原因。