All geek questions in one place

HTML5 or flash player for streaming with Amazon Cloudfront

I want to transfer audio / video files to the player. A player can be either HTML5 or a Flash player, depending on whether HTML5 audio () is supported by the client browser or not? The streaming server I am considering is AMAZON Cloudfront. I went through the guide at amazon http://docs.amazonwebservices.com/AmazonCloudFront/latest/DeveloperGuide/RTMPStreaming.html#d0e4668 , but it only talks about the Flash player. Can I use HTML5 Player with streaming media from Amazon Cloudfront?

+6
source share
2 answers

ACF distributions (Amazon CloudFront) use Flash Media Server for RTMP streams, so CF distributions alone are not a complete solution for providing streaming capabilities for non-flash players / devices too!

This gives you 2 options;

  • offers streaming playback only to users / devices with normal, the ability to progressive download via HTML5 OR
  • Setting up a WOWZA media server with content flow, if in HTML mode.

In any case, this can be achieved with the [] var mode player, where you can provide various settings such as path / file and other variables such as streamer and provider in your playlist / player .

Example Suppose you have the following setting:

  • Bucket, 'my-music.s3.amazonaws.com/'. Here you store your media. For example, "my-music.s3.amazonaws.com/audio/" for audio and 'my-music.s3.amazonaws.com/video/' for video.
  • RTMP streaming distribution with your 'my-music.s3.amazonaws.com/' as the source. This will be your flashvar streamer, something like 'XXXXXXXXXXX.cloudfront.net/cfx/st/'.
  • MP3 located in the folder '/audio/song.mp3'.

To make this work either in Flash (with an RTMP stream) or in HTML5 (as a progressive download), you will need to configure the player as follows:

<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>

Of course, if you use a CMS, widget, plug-in or module for managing players, you can probably access and edit these settings on the administrator screen or, alternatively, install them programmatically.

It should be noted that the order in which type objects are placed in the mode [] array is the order in which the JW player tries to load.

For more information, see JW Embedder Modes here .

Double Stream Suggestion If you want to suggest streaming using HTML5, you should use the same approach by changing the attributes of the streamer, the provider in an object of type html5 accordingly.

Hope this will be helpful!

Geese

+7
source

JWplayer will very easily execute both html5 and Flash streams from Cloudfront.

See below for details ... http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/49/using-cloudfront

John

+1
source

Source: https://habr.com/ru/post/910494/

More articles:


All Articles