Strobe Media Playback for Flash and HTML5 <video>

<iframe> embed code

The simplest embed strategy is using iframes. This is likely to become a standard across major video sites.

Sample embed code

	
        <:iframe src="embed.html?
			src=http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.mp4" 
			class="strobemediaplayback-video-player" type="text/html" 
			width="833" 
			height="641">
        <:/iframe>			
		

Live Demos

jQuery plugin

As a web designer, you might want to use our jQuery plugin instead of the iframe. Like this you have complete control over the video playback and the experience arround the player.

Using the jQuery snippet also saves a HTTP request, so if you have control over the pages where the video is hosted this approach is much better.

Sample embed code

        	
            <div id="strobemediaplayback" style="width:640px; height:480px"></div>
			<script type="text/javascript" src="lib/swfobject.js"></script>
            <script type="text/javascript" src="lib/jquery/jquery-1.4.2.js"></script>
            <script type="text/javascript" src="jquery.strobemediaplayback.js"></script>
            
            <script type="text/javascript">
            $(function(){
                var options = {
                    src: "http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.mp4",
                    width: 640,
                    height: 480
                };
                // Now we are ready to generate the video tags
                $("#strobemediaplayback").strobemediaplayback(options);
            });
            </script>		
		

Live Demos

Custom Chrome

Instead of using the default browser chrome it is possible to use a custom control bar. Like this you have full control over the playback controls look and feel.

Live Demos