使用HTML5阅读red5直播

Question

如何使用HTML5读取Red5(RTMFP)流？

Answer 1

Red5支持不同类型的流*,所以我不知道你的意思是哪种流:

• 流媒体视频(FLV,F4V,MP4)
• 流式音频(MP3,F4A,M4A)
• 录制客户端流(仅限FLV)

*来源:Google代码上的Red5.

您可能希望使用HTML5视频标记和/或HTML5音频标记来"播放"流.因此,您需要进行一些转换.

音频流

新技术,很多浏览器,还没有通用的编解码器支持.

查看它支持的浏览器+编解码器*:

• FireFox 3.6+
  • Ogg Vorbis
  • WAV
• Safari 5+
  • MP3
  • WAV
• Chrome 6
  • Ogg Vorbis
  • MP3
• Opera 10.5+
  • Ogg Vorbis
  • WAV
• Internet Explorer 9 (beta)
  • MP3
  • WAV

*source:浏览器中的Native Audio.

视频流

目前正在讨论关于Ogg Theora和H.264之间的HTML5视频编解码器.因此,转换为其中一种格式.因为它看起来像的Red5将实现H.264的支持,我会建议H.264 的未来.

与音频和视频一样..新技术,很多浏览器,还没有通用的编解码器支持.查看列表:维基百科上的HTML5视频.

转换后

检查视频和音频标签支持的最简单方法是使用脚本动态创建一个或两个,并检查函数是否存在:

var hasVideo = !!(document.createElement('video').canPlayType);

这个简单的代码行将动态创建一个视频元素并检查canPlayType()函数是否存在.通过使用!! operator,结果将转换为布尔值,指示是否可以创建视频对象.

另外

您可以使用Flash Fallback提供2个流:

<video src="video.ogg">
  <object data="videoplayer.swf" type="application/x-shockwave-flash">
    <param name="movie" value="video.swf"/>
  </object>
</video>

默认情况下使用视频标签,如果不支持,浏览器将使用flashplayer.

编辑:

我现在看到Red5支持H.264(实时流发布).请阅读此处如何将HTML5视频标签与H.264编解码器一起使用

您可能还想看看:Adobe的视频播放器小部件.