Embed video in HTML example: RTMP Flash to HTML5 H.264 MP4 and WebM with jwplayer

Embed Video HTML: Embedding Video Using HTML5 and JWPLayer

 

JWPlayer 6 now requires either mRSS or SMIL (funny how the .smil file is kinda bouncing back lately. I remember it of course from the Real Network days.). I used SMIL to load my multi bit rate flash in this example below. 1st up is the embed code referencing the .smil file, followed by the contents of the playlist .smil file. Flash Media Server uses the contents of the smil file for bandwidth negotiation (adaptive bit rate streaming) of the mp4’s via rtmp://

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- BEGIN PLAYER EMBED -->
<div class="outer">
<div class="inner">
<div id="006">Video is loading...</div>
<script>
    jwplayer("006").setup({
      playlist: [{
        image: "meta/img/logo.jpg",
        sources: [{ file: "meta/006.smil" },
		        { file: "006/video1_1800Kbps_720p.mp4", label: "720p HD" },
				{ file: "006/video2_768Kbps_360p.mp4", label: "480p HD" },
          		[{ file: "006/video3_512Kbps_288p.mp4", label: "360p" }],
				{ file: "006/video1_WebM_1200Kbps_720p.webm", label: "720p HD" },
		        { file: "006/video2_WebM_768Kbps_360p.webm", label: "480p HD" },
				{ file: "006/video3_WebM_512Kbps_288p.webm", label: "288p HD" }],
      }],
      primary: "flash", width: 896, height: 504, 
	  abouttext:"Learn more about this company!",
	        aboutlink:"http://www.microsoft.com",
			ga: {}
    });</script><!-- End Player Embed --></div>
</div>

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<video width="1280" height="720" src="006/Staybridge-Brand-Session_1800Kbps_720p.mp4" system-bitrate="1126400">
<object width="1280" height="720" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="src" value="https://gravlab.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" />
<param name="flashvars" value="url=/wp-admin/006/Staybridge-Brand-Session_1800Kbps_720p.mp4&amp;poster=/wp-admin/" />
<param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" />
<embed width="1280" height="720" type="application/x-shockwave-flash" src="https://gravlab.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" flashvars="url=/wp-admin/006/Staybridge-Brand-Session_1800Kbps_720p.mp4&amp;poster=img.jpg" allowfullscreen="true" allowscriptaccess="true" />
</object></video> 
<video width="768" height="480" src="006/Staybridge-Brand-Session_768Kbps_360p.mp4" system-bitrate="614400 ">
<object width="768" height="480" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="https://gravlab.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=/wp-admin/006/Staybridge-Brand-Session_768Kbps_360p.mp4&amp;poster=img.jpg" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" />
<embed width="768" height="480" type="application/x-shockwave-flash" src="https://gravlab.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" flashvars="url=/wp-admin/006/Staybridge-Brand-Session_768Kbps_360p.mp4&amp;poster=img.jpg" allowfullscreen="true" allowscriptaccess="true" />
</object></video> 
<video width="640" height="360" src="006/Hotel-Indigo-Gen-Sess_1_512Kbps.mp4" system-bitrate="300000">
<object width="640" height="360" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="https://gravlab.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" />
<param name="flashvars" value="url=/wp-admin/006/Hotel-Indigo-Gen-Sess_1_512Kbps.mp4&amp;poster=img.jpg" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="true" />
<embed width="640" height="360" type="application/x-shockwave-flash" src="https://gravlab.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" flashvars="url=/wp-admin/006/Hotel-Indigo-Gen-Sess_1_512Kbps.mp4&amp;poster=img.jpg" allowfullscreen="true" allowscriptaccess="true" />
</object>
</video>

 

We do all of the heavy lifting to support advanced video delivery to Apple mobile devices. You embed any of our many html5 players into your website, or keep it on your page and use an iframe (like youtube or vimeo, only a better, faster worldwide network).

 

Your audience is directed to your video via the shortest hop to our datacenters and 27 POPs. Your video is streamed from the closet edge node on our CDN.

 

Ready to optimize your video for every screen? Get started with fast, worldwide streaming video hosting today!

 

0