Streaming Video - jwplayer, amazon s3 and cloudfront

Question

I have a streaming distribution at s6b99lczhnef6.cloudfront.net on Amazon. The origin is a bucket in S3. The bucket has a video video.mp4. It's public. I am trying to test streaming this video with jwplayer, following is the code:

<html>
<head>
    <script type="text/javascript" src="jwplayer/jwplayer.js"></script>
</head>
<body>
    <div id="container">Loading the player ...</div>
    <script type="text/javascript">
    jwplayer("container").setup({
        flashplayer: "jwplayer/player.swf",
        file: "video.mp4",
        height: 270,
        provider: "rtmp",
        streamer: "rtmp://s6b99lczhnef6.cloudfront.net/cfx/st",
        width: 480
    });
    </script>
</body> 
</html>

The video is not playing. There are no JS errors. What could be going wrong?

iloveitaly · Answer 1 · 2012-12-12T15:25:57.147

The amazon documentation is valid for JW Player 5.9, and JW Player's documentation is fairly sparse on using CloudFront streaming. As briefly explained here, specifying the streaming source has changed with JW Player 6. This is the new way to specify a streaming source:

<div id='mediaplayer'>This text will be replaced</div>
<script type="text/javascript">
   jwplayer('mediaplayer').setup({
      'id': 'playerID',
      'width': '720',
      'height': '480',
      'file': 'rtmp://s1cxpk7od1m10r.cloudfront.net/cfx/st/your_streaming_file.mp4',
      'primary':'flash',
      'autostart' : 'true',
   });
</script>

If your stream is in the folder, you might have some issues using the file reference above. I'm not sure why rtmp://s1cxpk7od1m10r.cloudfront.net/cfx/st/folder/your_streaming_file.mp4 wouldn't work for me (I think it has something to do with URL encoding), however using this for the file param when accessing a streaming resource located in a folder worked for me:

rtmp://s1cxpk7od1m10r.cloudfront.net/cfx/st/mp4:folder/your_streaming_file.mp4

If you want to test your connection string and get some debugging output, checkout this streaming diagnostic tool.

You do not need to specify a bucketname anywhere in the embed code.

score 1 · Answer 2 · answered Jun 11 '12 at 06:43

1

I think you have to give file string value as bucketname/video.mp4 else all seems fine.

answered Jun 11 '12 at 06:43

Tej Kiran

2,218
5
21
42

score 0 · Answer 3 · answered Jun 11 '12 at 18:41

No, that is not correct because he is using CloudFront. I see in-consequent use of quotes. Try this:

<div id="container">Loading the player ...</div>
<script type="text/javascript">
jwplayer("container").setup({
    'flashplayer': 'jwplayer/player.swf',
    'file': 'video.mp4',
    'height': '270',
    'provider': 'rtmp',
    'streamer': 'rtmp://s6b99lczhnef6.cloudfront.net/cfx/st',
    'width': '480'
});
</script>

Here is a tutorial that explains the formatting and options in great detail. http://www.miracletutorials.com/embed-streaming-video-audio-with-html5-fallback/

If that does not work, it is possible your video is not optimized for streaming. Try out this tutorial to convert your video: http://www.miracletutorials.com/how-to-encode-video-for-web-iphone-ipad-ipod/

I hope this helps?

For some reason, playing it from localhost does not work. If I deploy the HTML to say another bucket in S3 and load it in the browser from there, the video plays great (loads pretty fast!). Maybe, there is some restriction on 'localhost'? — septerr, Jun 20 '12 at 04:20

score 0 · Answer 4 · answered Jul 10 '12 at 19:50

0

No, you do not need to provide a bucketname. The cloudfront distribution already points to a bucket.

answered Jul 10 '12 at 19:50

Tim A

43
1
5

score -4 · Accepted Answer · answered Jun 20 '12 at 04:20

-4

Loading the HTML page from a server other than 'localhost' works.

answered Jun 20 '12 at 04:20

septerr

6,445
9
50
73

That's a weak answer to your own question. Where you trying to earn a badge or something? – Matthew Purdon Feb 08 '13 at 19:10

Streaming Video - jwplayer, amazon s3 and cloudfront

5 Answers5