用于从Amazon Cloudfront进行流式传输的HTML5或Flash播放器

Question

我想在播放器中传输音频/视频文件.播放器可以是HTML5或Flash播放器,具体取决于客户端浏览器是否支持HTML5 audio()这一事实？我正在考虑的流媒体服务器是AMAZON Cloudfront.我已经浏览了亚马逊的指南http://docs.amazonwebservices.com/AmazonCloudFront/latest/DeveloperGuide/RTMPStreaming.html#d0e4668但它只讨论了Flash播放器.是否可以将HTML5播放器与Amazon Cloudfront中的流媒体结合使用？

Answer 1

ACF(Amazon CloudFront)发行版利用Flash Media Server进行RTMP流,因此CF发行本身并不是为非闪存播放器/设备提供流媒体功能的完整解决方案!

这让你有两个选择;

1. 仅通过HTML5 OR向Flash用户/设备提供常规,渐进式下载选项
2. 如果处于HTML模式,请设置WOWZA媒体服务器,并将您的内容流式传输.

无论哪种方式,这可以通过使用播放器的实现模式[]变种在那里你可以提供不同的设置参数,如路径/文件和其他变量,如流光和供应商在你的播放列表/播放器相应.

示例 假设您有以下设置;

1. 一个水桶,'my-music.s3.amazonaws.com/'.这是存储媒体的地方.例如,音频的'my-music.s3.amazonaws.com/audio/'和视频的'my-music.s3.amazonaws.com/video/'.
2. 以"my-music.s3.amazonaws.com/"存储桶为源的RTMP流分发版.这将是你的流光flashvar,类似'XXXXXXXXXXX.cloudfront.net/cfx/st/'.
3. MP3位于"/audio/song.mp3"位置.

要使其在Flash(使用RTMP流)或HTML5(作为渐进式下载)中工作,您需要按照以下方式设置播放器...

<script type="text/javascript">
/* set var baseURL to your media BUCKET 
NOT your streaming distribution */
var baseURL = "https://my-music.s3.amazonaws.com/";

jwplayer('mediaplayer').setup({
'id': 'playerID',
 'width': '480',
'height': '270',
'file': 'audio/song.mp3', /* change to your song/video path */
'provider': 'rtmp', 
'streamer': 'rtmp://XXXXXXXXXXX.cloudfront.net/cfx/st/', 
 'modes': [
    {   
        type: 'flash',
        /* set the location of your SWF object */
        src: 'https://my-player.s3.amazonaws.com/plugins/jwplayer/player.swf' 
    },
    {
        type: 'html5',
        config: {
            /* prepend your BUCKET URL (baseURL var) to the file path */
            'file': baseURL + 'audio/song.mp3', 
            /* set provider */
            'provider': 'video'
        }
    }
 ]
});
</script>

当然,如果您使用CMS,小部件,插件或模块来管理播放器,您可能可以在管理屏幕中访问和编辑这些参数,或者以编程方式设置它们.

需要注意的一点是,将类型对象放在mode []数组中的顺序是JW播放器尝试加载的顺序.

有关详细信息,请参阅此处的JW嵌入模式.

提供双流媒体 如果您想使用HTML5提供流媒体,您可以使用相同的方法,相应地更改html5类型对象中的流媒体,提供者属性.

希望这有用!

盖孜