This is a message.

Need Help combining RTMP/CloudFront+Overlay Created Jun 6, 2010

This thread is solved

Views: 3186     Replies: 13     Last reply Dec 26, 2011  
You must login first before you can use this feature

Muse

Posts: 12

Registered:
Jun 4, 2010

Need Help combining RTMP/CloudFront+Overlay

Posted: Jun 6, 2010

I have flowplayer working with RTMP on CloudFront:http://www.go2southwest.com/flowplayer/fpstandalonecf.html

I also have flowplayer working with the Overlay plugin, using HTTP:
http://www.go2southwest.com/flowplayer/fpoverlayhttp.html

But I can't seem to get RTMP working with the Overlay plugin.

My working RTMP:
<head>

<!-- it's recommended to load jquery directly from googleapis. fast and gzipped --> 
<script src="jquery.min.js"></script>

<!-- flowplayer scripts should be loaded from your servers NOT from static.flowplayer.org  -->

<script type="text/javascript" src="flowplayer-3.2.0.min.js"></script>

</head>

<!-- some styling for the standalone page. this line can (or must) be removed -->
<link rel="stylesheet" type="text/css" href="standalone.css"/>

<body>

<!-- player container-->

<!--
		href points to the video file in our CloudFront bucket.
		We have a folder called 'examples' in the bucket and the file is contained there.
		Amazon CloudFront uses the Adobe's RTMP server and therefore 
		we remove the file extension .flv from the url
-->
<a	href="2010_05_30"
	style="display:block;width:425px;height:300px;"
	id="rtmpPlayer">

	<!-- splash image inside the container -->
	<img src="http://media.go2southwest.com.s3.amazonaws.com/images/google-445x245.jpg" alt="Search engine friendly content" />

JavaScript:

<!-- Flowplayer installation and configuration -->
<script language="JavaScript">

flowplayer("rtmpPlayer", "flowplayer-3.2.1.swf", {

	// configure the required plugins
	plugins:  {

		// the RTMP plugin
		rtmp: {
			url: 'flowplayer.rtmp-3.2.0.swf',
			
			// netConnectionUrl has our CloudFront domain name + 'cfx/st'
			netConnectionUrl: 'rtmp://s2fbqgj15jzvbf.cloudfront.net/cfx/st'
		}
	},

	clip: {
	    // use the RTMP plugin
		provider: 'rtmp'
	}

});

My working Overlay HTML:

<head>

<!-- jQuery Tools -->

<script src="jquery.tools.min.js"></script>

<!-- flowplayer scripts  -->

<script type="text/javascript" src="flowplayer-3.2.0.min.js"></script>

</head>

<!-- styling -->
<link rel="stylesheet" type="text/css" href="standalone.css"/>

<body>

<style>
div.overlay {
	padding:40px;	
	width:576px;  
	display:none;
	background-image:url(overlay/white.png);	
}

div.overlay div.close {
	background:url(overlay/close.png) no-repeat;
	position:absolute;
	top:2px;
	right:5px; 
	width:35px;
	height:35px;
	cursor:pointer;
}

div.overlay a {
	height:450px;
	display:block;
}
</style>

<!-- button that opens up overlay -->
<p>
	<button href="#" rel="div.overlay">Open overlayed video</button>
</p>

<!-- element that is overlayed, visuals are done with external CSS -->
<div class="overlay" style="background-image:url('overlay/white.png')">

	<!-- flowplayer container -->
	<a id="player" href="http://media.go2southwest.com.s3.amazonaws.com/2010_05_30.flv">
	
		<!-- some initial content so that player is not loaded upon page load -->

		 
	</a>

JavaScript:

<script>

$(function() {

	// install flowplayer into flowplayer container
	var player = $f("player", "flowplayer-3.2.1.swf");
	
	// setup button action. it will fire our overlay 
	$("button[rel]").overlay({
		
		// use the Apple effect for overlay
		effect: 'apple',
		
		// when overlay is opened, load our player
		onLoad: function() {
			player.load();
		},
		
		// when overlay is closed, unload our player
		onClose: function() {
			player.unload();
		}
	});
			
});

Now... If I could just get the Overlay to use RTMP

Muse

Posts: 12

Registered:
Jun 4, 2010

RTMP/CloudFront+Overlay working in FF - Graphics messed up in IE

Posted: Jun 14, 2010

Reply to: Need Help combining RTMP/CloudFront+Overlay, from waco_muse
I was able to get the Overlay with Apple effect working using RTMP streaming. It displays great in FireFox, but needs something in IE.

Link:http://www.go2southwest.com/flowplayer/fpoverlayrtmp4.html 


<html>
<head>


<script src="jquery.tools.min.js"></script>


<!-- styling -->
<link rel="stylesheet" type="text/css" href="standalone.css"/>

<body>

Standalone CSS Code:


body {

	padding:50px 80px;

	font-family:"Lucida Grande","bitstream vera sans","trebuchet ms",sans-serif,verdana;

}



/* get rid of those system borders being generated for A tags */

a:active {

  outline:none;

}



:focus {

  -moz-outline-style:none;

}

Body Style Code:

<style>
div.overlay {
        padding:40px; 
        width:565px; 
        display:none;
        background-image:url(overlay/white.png); 
}

div.overlay div.close {
	background:url(overlay/close.png) no-repeat;
	position:absolute;
        top:5px;
        right:5px; 
	width:35px;
	height:35px;
	cursor:pointer;
}

div.overlay a {
	height:450px;
	display:block;
        hover: #ffffff;
}

</style>



<a	href="2010_06_13" style="display:block;width:425px;height:300px;" rel="div.overlay">

	<!-- splash image inside the container -->
	<img src="http://media.go2southwest.com.s3.amazonaws.com/images/witw-445x245.jpg" />

</a>

 
<!-- element that is overlayed, visuals are done with external CSS --> 
<div class="overlay"> 
    <!-- flowplayer container --> 
    <a id="ids1" class="nohover"> 
        <!-- some initial content so that player is not loaded upon page load --> 
        
    </a> 
</div>



<script language="JavaScript">
$(function() {

     var player =
     $f("ids1", "flowplayer-3.2.1.swf", {
 
         plugins: {
            rtmpstream: {
               url: 'flowplayer.rtmp-3.2.0.swf',
               netConnectionUrl: 'rtmp://s2fbqgj15jzvbf.cloudfront.net/cfx/st'
            }
         },
 
         clip: {    
                    provider: 'rtmpstream',
                    autoPlay: true,
                    scaling: 'fit',
                    autoBuffer: false
         }

     });

     // create overlay
     $("a[rel]").each( function () {

         var href = $(this).attr('href');

             $(this).overlay({
               onLoad: function() { 
                 player.play(href);

               },
			   
	 // use the Apple effect for overlay
		effect: 'apple',
		mask: '#000',
		
               onClose: function() {
                 player.unload();
               }
             });

     });

});

</script>


</body>
</html>

Carlos13

Posts: 14

Registered:
Aug 20, 2010

IE PROBLEM

Posted: Sep 3, 2010

Reply to: RTMP/CloudFront+Overlay working in FF - Graphics messed up in IE, from waco_muse
Did you solve the IE problem?

Try wrapping the 
$("a[rel]").each( function ()
with a 
$(window).load(function() {

See this thread. http://flowplayer.org/forum/4/17134

Haven't had luck getting overlay to work with RTMP yet. Your code might help.

Muse

Posts: 12

Registered:
Jun 4, 2010

Re: IE PROBLEM

Posted: Sep 3, 2010

Reply to: IE PROBLEM, from Carlos13
In my case I was using an incorrect header. When I switched to the header below, IE was happy.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Muse

Posts: 12

Registered:
Jun 4, 2010

RTMP Streaming with Overlay

Posted: Sep 3, 2010

Reply to: IE PROBLEM, from Carlos13
I was able to get the Overlay Video working with RTMP streaming. You can view my source code here:http://www.go2southwest.com/media/popup/index.html

Carlos13

Posts: 14

Registered:
Aug 20, 2010

Thanks. Have multiple overlays working now

Posted: Sep 8, 2010

Reply to: RTMP Streaming with Overlay, from waco_muse
Thanks for the link to your page.

I got overlay working with multiple videos:
http://www.librarymedia.net/dmp/macvideo.html

This is an alternative Mac page (the main page was made with FrontPage and uses Windows Media, FP is an abomination) so it does not render/work properly with Internet Destroyer (another scourge of the earth). I don't know if it would be worth fixing this to work with IE at this point.