added RTMP support. fixes #559 #605

iamjem · 2013-06-27T14:55:55Z

I made these additions last year and have been using in production for a while with no problems. I've also committed a pull request to the video-js-swf project, and that same compiled SWF is included here.

Using streaming is pretty simple now, you can add a <source> element with type set to rtmp/mp4 or rtmp/flv whose src attribute uses this comma separated format: {{ connection url }},{{ stream url }}

For example, using Amazon Cloudfront, you might have a <source> element that looks like this:

<source src="rtmp://s12345.cloudfront.net/cfx/st,mp4:video.mp4" type='rtmp/mp4' />

The only caveat is that RTMP sources need to appear BEFORE other flash compatible progressive types, because the Flash tech will pick the first compatible one it finds.

You should also be able to use the playerInstance.src() method with RTMP strings like this:

playerInstance.src({type: 'rtmp/mp4', src: 'rtmp://s12345.cloudfront.net/cfx/st,mp4:video.mp4'})

heff · 2013-06-27T17:31:28Z

This is great, thanks. It might take some time to dig through the changes here and in the swf. If I could get you to write some unit tests around some of this, that'd help a lot.

I like the comma separated url method, it's pretty clean. Trying to think if there's any edge cases where another comma might be in the URL.

iamjem · 2013-06-27T17:41:34Z

I'll try and get some unit tests added by the end of the weekend. I also wasn't sure with the comma, I thought about using a pipe but I imagine we could think of edge cases for just about everything.

heff · 2013-06-27T17:46:43Z

Great. Yeah, I can't think of anything better off the top of my head.

On Jun 27, 2013, at 10:41 AM, Jeremy West notifications@github.com wrote:

I'll try and get some unit tests added by the end of the weekend. I also wasn't sure with the comma, I thought about using a pipe but I imagine we could think of edge cases for just about everything.

—
Reply to this email directly or view it on GitHub.

tim-peterson · 2013-07-02T18:11:27Z

You probably already know this, but for others coming across this thread you can also put streaming media in a source tag and video.js will play it on iOS/Mac OSX Safari.

<source src="http://devimages.apple.com/iphone/samples/bipbop/gear1/prog_index.m3u8" type="application/vnd.apple.mpegurl" />

iamjem · 2013-07-08T22:18:59Z

@tim-peterson good point! But we must not confuse HTTP streaming (which is not a mainstream thing yet) with RTMP streaming.

…nd allow for it to be missing. Add unit tests for changes. Add in the latest video SWF.

heff · 2013-07-18T18:23:23Z

Checking if this still applies with the recent swf RTMP update
videojs/video-js-swf#27

bdeitte · 2013-07-18T18:37:48Z

Too many tabs open. What I meant to say here is that you should pull in #634 instead.

…double quotes to validate under JSHint ruleset

bdeitte · 2013-08-19T00:35:35Z

docs/tech.md

@@ -49,6 +49,24 @@ When adding additional Tech to a video player, make sure to add the supported te
      techOrder: ["html5", "flash", "other supported tech"]
    });

+Flash Technology
+==================
+The flash playback tech is a part of the default `techOrder`. You may notice undesirable playback performance in browsers that are subject to using this playback tech, in particular when scrubbing and seeking within a video. These performance issues are a result of flash's progressive video playback.


Actual docs, fantastic! Looks good to me. Looks like this is now the pull request to take in and delete the other two. I have a few small comments in here, but nothing major...

A nitpick, but I always see "flash" as "Flash".

Is it playback performance that's the problem with progressive video, or just "playback behavior"? I assume this scrubbing/seeking comment is about the fact that you can't seek into a progressive video as done currently. I was confused here for a second, wondering what the "performance" part of this was.

I guess it might be fair to call it "behavior." Technically the browser is doing progressive playback too with HTML5, its just that its able to request content ranges so it appears to be more responsive when seeking.

tim-peterson · 2013-08-22T16:07:50Z

@heff perhaps b/c you work at Zencoder, you might include in this thread a link or short description of how this Video.js RMTP integration would work with Zencoder's API?

…ed seek check for flash RTMP playback in progress control

bdeitte · 2013-08-23T13:14:02Z

@heff This is the pull request that to me looks to have everything in it. @iamjem I checked over the last two commits, the only things I haven't looked at yet, and they look fine to me too. The only thing I didn't know about was whether anything else needed to be done when adding a new function on player.js.

…mp-support Conflicts: src/js/media/flash.js

heff · 2013-08-23T22:04:15Z

Awesome, thanks everyone! This is great work. Pulling it in.

bdeitte · 2013-08-24T00:35:08Z

Fantastic to see! Thanks for all of the work @iamjem!

heff · 2013-09-05T21:21:38Z

And now we have a live demo.
http://jsfiddle.net/heff/vCQEN/

LeDeau · 2013-09-07T09:45:01Z

I've confirmed that 4.2 does work with Cloudfront rtmp, but I can't seem to get it to work with Cloudfront Signed URLs. My signing process works fine for downloaded content and the rtmp URL appears to be correct.

Can anyone else confirm that it plays with signed URLs?

heff · 2013-09-09T18:32:52Z

I'm not familiar with signed URLs for RTMP myself. Anyone else?

avaranovich · 2013-09-13T12:14:07Z

Hi folks, thanks for the awesome job! What about live support? You say in the blog "We haven’t updated the UI to support live yet." Can I run live stream in a "dev" mode somehow?

iamjem · 2013-09-13T13:59:19Z

I'm entering this discussion a little late, but as far as the signed URLs go, is this referring to the RTMPS protocol? I was not able to get RTMPS to work with Cloudfront during testing, but that may have been user error on my part if there are additional steps involved to use RTMPS.

rsadwick · 2013-09-18T21:15:08Z

@avaranovich, you can play live video, however the UI (progress bar) stays on 0 because there isn't a "duration" on a live video. You could add to the css to display a better graphic, showing the user that the video is live and cannot be scrubbed.

Here is an example:
http://jsfiddle.net/rsadwick/9tws4/

I'm currently contributing to enhancements to live video soon.

LeDeau · 2013-09-19T03:54:20Z

The issue is with the & prior to the file name. What is the purpose of it? Can we update the .swf so that it doesn't require it or uses a different symbol?

Cloudfront uses a querystring to pass the signed values resulting in something similar to the below:

rtmp://sXXXXX.cloudfront.net:1935/cfx/st/&mp4:{FileName}.mp4?Expires={Epoch}&Signature={Signature}&Key-Pair-Id={KeyPairID}

I have confirmed that my signed URL does work properly by testing using the Amazon Diagnostic Client here:

http://d1k5ny0m6d4zlj.cloudfront.net/diag/CFStreamingDiag.html

rsadwick · 2013-09-19T16:21:00Z

The ampersand is a delimiter that separates the connection from the stream. It needs to be separated in order for Flash to connect to rtmp and then play the stream. Although, I'm not sure the regex supports the port number in your rtmp url, I'd have to research.

Can you send me a working url privately? I can debug it for you to help the research against the port number.

LeDeau · 2013-09-19T16:36:13Z

I have verified that the port number is not necessary, but removing it does not fix the issue.

I sent you an email via your website, please reply when able for a signed example.

LeDeau · 2013-09-19T20:58:27Z

This has been resolved, 4.2.1 does play with Amazon Cloudfront signed and unsigned RTMP videos.

I hope this helps someone else, when signing HTTP downloads, use the full path to the file, including the domain. When signing RTMP files, only use the path to the actual video, excluding the leading /, if your video is in the root of the bucket, use Video.mp4, not /Video.mp4. For subfolders, use Subfolder/Video.mp4, not /Subfolder/Video.mp4.

spillai-intrax · 2014-08-05T06:36:50Z

This has been a savior! Thanks to @LeDeau and all those who have commented out here. I was stuck at using signed URL's in videojs. Signing only the path to actual video and excluding the domain helped!

added RTMP support. fixes videojs#559

c76e4c3

iamjem mentioned this pull request Jun 27, 2013

Updated RTMP provider. fixes #8 videojs/video-js-swf#17

Merged

Brian Deitte added 2 commits July 11, 2013 10:06

Merge branch '559-rtmp-support' of https://github.com/iamjem/video.js

ae00d62

More changes for RTMP support. Switch the connection delimiter to & a…

4803939

…nd allow for it to be missing. Add unit tests for changes. Add in the latest video SWF.

bdeitte mentioned this pull request Jul 11, 2013

updated added RTMP support. fixes #559 #634

Closed

heff mentioned this pull request Jul 18, 2013

Updated updated RTMP provider. fixes #8 videojs/video-js-swf#27

Merged

iamjem and others added 2 commits August 2, 2013 13:43

updated Flash.isStreamingSrc method and added unit tests

9f9c17a

update Flash.js API with rtmpStream, rtmpConnection extention. Fixed …

dcc0b91

…double quotes to validate under JSHint ruleset

bdeitte mentioned this pull request Aug 14, 2013

RTMP Support Updates #687

Closed

iamjem added 4 commits August 14, 2013 12:21

Merge remote-tracking branch 'upstream/master'

fced88f

removed unnecessary timeupdate event trigger

12190f9

updated docs with flash streaming

ed93590

fixed ampersand in tech docs

8184d18

bdeitte reviewed Aug 19, 2013
View reviewed changes

iamjem added 2 commits August 20, 2013 10:49

updated flash mentions to be capitalized, listed all rtmp protocols

2045eb1

added most recent video-js-swf

a5db6ba

enabled seeking API method, added stub to mediafaker for tests, enabl…

372d395

…ed seek check for flash RTMP playback in progress control

Merge remote-tracking branch 'seniorflexdeveloper/master' into 559-rt…

ccfba30

…mp-support Conflicts: src/js/media/flash.js

heff closed this in 7ab3d19 Aug 23, 2013

heff mentioned this pull request Sep 9, 2013

RTMP with Amazon Cloudfront Signed URL #728

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

added RTMP support. fixes #559 #605

added RTMP support. fixes #559 #605

iamjem commented Jun 27, 2013

heff commented Jun 27, 2013

iamjem commented Jun 27, 2013

heff commented Jun 27, 2013

tim-peterson commented Jul 2, 2013

iamjem commented Jul 8, 2013

heff commented Jul 18, 2013

bdeitte commented Jul 18, 2013

bdeitte Aug 19, 2013

iamjem Aug 19, 2013

tim-peterson commented Aug 22, 2013

bdeitte commented Aug 23, 2013

heff commented Aug 23, 2013

bdeitte commented Aug 24, 2013

heff commented Sep 5, 2013

LeDeau commented Sep 7, 2013

heff commented Sep 9, 2013

avaranovich commented Sep 13, 2013

iamjem commented Sep 13, 2013

rsadwick commented Sep 18, 2013

LeDeau commented Sep 19, 2013

rsadwick commented Sep 19, 2013

LeDeau commented Sep 19, 2013

LeDeau commented Sep 19, 2013

spillai-intrax commented Aug 5, 2014

added RTMP support. fixes #559 #605

added RTMP support. fixes #559 #605

Conversation

iamjem commented Jun 27, 2013

heff commented Jun 27, 2013

iamjem commented Jun 27, 2013

heff commented Jun 27, 2013

tim-peterson commented Jul 2, 2013

iamjem commented Jul 8, 2013

heff commented Jul 18, 2013

bdeitte commented Jul 18, 2013

bdeitte Aug 19, 2013

Choose a reason for hiding this comment

iamjem Aug 19, 2013

Choose a reason for hiding this comment

tim-peterson commented Aug 22, 2013

bdeitte commented Aug 23, 2013

heff commented Aug 23, 2013

bdeitte commented Aug 24, 2013

heff commented Sep 5, 2013

LeDeau commented Sep 7, 2013

heff commented Sep 9, 2013

avaranovich commented Sep 13, 2013

iamjem commented Sep 13, 2013

rsadwick commented Sep 18, 2013

LeDeau commented Sep 19, 2013

rsadwick commented Sep 19, 2013

LeDeau commented Sep 19, 2013

LeDeau commented Sep 19, 2013

spillai-intrax commented Aug 5, 2014