使用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
相关参考链接
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_ 则可以正常播放。目前还不知道原因。
类似资料：