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

来源：互联网发布：阿里云上海节点编辑：程序博客网时间：2024/05/18 03:09

主要用到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. clappr-rtmp-plugin是基于OSMF开发的，据说可以利用smil实现rtmp的ABR播放，这个待看

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

阅读全文

0 0