WEBSTANDARDS Archives

September 2010

WEBSTANDARDS@LISTS.UMN.EDU

Options: Use Monospaced Font
Show HTML Part by Default
Show All Mail Headers

Message: [<< First] [< Prev] [Next >] [Last >>]
Topic: [<< First] [< Prev] [Next >] [Last >>]
Author: [<< First] [< Prev] [Next >] [Last >>]

Print Reply
Subject:
From:
Colin McFadden <[log in to unmask]>
Reply To:
UofMN CSS Web Development <[log in to unmask]>
Date:
Thu, 2 Sep 2010 20:03:29 -0500
Content-Type:
multipart/alternative
Parts/Attachments:
text/plain (6 kB) , text/html (22 kB)
We've got an HTML5 player in beta for media mill.  You can check it out here:
http://mediamill.cla.umn.edu/mediamill2/html5/78553

It'll use html5 to play back in Safari 4/5 and Chrome, and fall back to Flash in Firefox, IE, etc.  It'll use the native controls on iPad/iPhone (assuming the video is within the parameters of what those devices can play - IE, not 1080p or something).  It uses our "quicktime" (h264) derivatives. 

Below is the current embed code.  Hope that helps at least a little.

-Colin

<script src="http://mediamill.cla.umn.edu/tools3/video.js" type="text/javascript" charset="utf-8"></script>

	  <script type="text/javascript" charset="utf-8">
	    
	    // If not using a JS library
	    window.onload = function(){
	      VideoJS.setup({	"controlsBelow" : true, 
												"controlsHiding" : false, 
												"loopPlayback" : false, 
												
												
												"autoPlay" : false, 
												"forceBrowserFullscreen" : false,
												"captionsOn" : false,
												"additionalSources": { "HD": "http://mediamill.cla.umn.edu/mediamill/download.php?file=78553","Large": "http://mediamill.cla.umn.edu/mediamill/download.php?file=78555" }
										});
	    }

	  </script>
	 <link rel="stylesheet" href="http://mediamill.cla.umn.edu/mediamill2/css/video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
	<div class="video-js-box">
<video class="video-js" width="960" height="540" poster="http://mediamill.cla.umn.edu/mediamill/thumb.php?id=60421&big=true" controls preload="none">
<source src="http://mediamill.cla.umn.edu/mediamill/download.php?file=78553.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<object class="vjs-flash-fallback" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="flvplayer" align="middle" height=560 width=960>
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="http://mediamill.cla.umn.edu/mediamill/flvplayer.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowfullscreen" value="true">
<param name="FlashVars" value="file=78553.mov&repeat=false&streamscript=http://mediamill.cla.umn.edu/mediamill/download.php&width=960&height=560&autostart=false&image=http://mediamill.cla.umn.edu/mediamill/thumb.php?id=60421%26big=true&qualitylevel=true&qualityURL=http://mediamill.cla.umn.edu/mediamill/qualityXML.php?ARCHIVE_ID=60421%26hash=c6c6b3ba53b21d702f22bbeb9d4c5468%26MEDIA_ID=78553" />
<embed src="http://mediamill.cla.umn.edu/mediamill/flvplayer.swf" FlashVars="file=78553.mov&repeat=false&streamscript=http://mediamill.cla.umn.edu/mediamill/download.php&width=960&height=560&autostart=false&image=http://mediamill.cla.umn.edu/mediamill/thumb.php?id=60421%26big=true&qualitylevel=true&qualityURL=http://mediamill.cla.umn.edu/mediamill/qualityXML.php?ARCHIVE_ID=60421%26hash=c6c6b3ba53b21d702f22bbeb9d4c5468%26MEDIA_ID=78553" quality="high" bgcolor="#ffffff" width=960 height=560 name="flvplayer" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" allowfullscreen=true />
</embed>
</object>
</video></div>


On Sep 2, 2010, at 5:10 PM, Craig Gjerdingen wrote:

> FYI
>  
> Looking for a way to store and play video as native as possible, with as few files and as little mark up as possible, in as many browsers as possible. (for me the hosting environment is SharePoint, but this should be mostly a mark-up issue. Will likely be using a lot of Camtasia Relay and MediaMill source files, to a lesser degree some will only be flash).
>  
> Kind of thing we are using now...
>  
>  
>  
>  
> <script src="/_layouts/1033/images/csom/Scripts/swfobject_modified.js" type="text/javascript"></script>
> <div style="text-align:center;width:100%;margin-left:auto;margin-right:auto;margin-top:20px;margin-bottom:20px;"><p>
>   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="618" id="FlashID" title="Carlson and UMN Events Systems">
>     <param name="movie" value="Event-Management-Videos/Events-Management-with-UMN-Events.swf" />
>     <param name="quality" value="high" />
>     <param name="wmode" value="opaque" />
>     <param name="swfversion" value="8.0.35.0" />
>     <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you donít want users to see the prompt. -->
>     <param name="expressinstall" value="/_layouts/1033/images/csom/Scripts/expressInstall.swf" />
>     <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
>     <!--[if !IE]>-->
>     <object type="application/x-shockwave-flash" data="Event-Management-Videos/Events-Management-with-UMN-Events.swf" width="800" height="618">
>       <!--<![endif]-->
>       <param name="quality" value="high" />
>       <param name="wmode" value="opaque" />
>       <param name="swfversion" value="8.0.35.0" />
>       <param name="expressinstall" value="/_layouts/1033/images/csom/Scripts/expressInstall.swf" />
>       <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
>       <div>
>         <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
>         <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
>       </div>
>       <!--[if !IE]>-->
>     </object>
>     <!--<![endif]-->
>   </object>
> </p>
> <script type="text/javascript">
> <!--
> swfobject.registerObject("FlashID");
> //-->
> </script>
> </div>
>  
>  
> -----Original Message-----
> From: Craig Gjerdingen [mailto:[log in to unmask]] 
> Sent: Thursday, September 02, 2010 1:07 PM
> To: Gjerdingen-1 Craig L
> Subject: graceful degrade HTML 5 video - Google Search
>  
> http://www.google.com/search?q=graceful+degrade+HTML+5+video&ie=UTF-8&oe=UTF-8&hl=en&client=safari
>  
>  
> http://stackoverflow.com/questions/1903779/html5-video-and-degradation
>  
>  
> http://www.niallkennedy.com/blog/2010/02/html5-video-markup.html
>  
>  
>  
> http://developer.practicalecommerce.com/articles/1697--Video-for-Everybody-Gracefully-Degrades
>  

--------------------------------------------------
Colin McFadden
CLA-OIT Academic Technologies
University of Minnesota
Email: [log in to unmask]
Office: (612)-626-6646
Cell: (612)-702-0779
Fax: (612)-624-0017







ATOM RSS1 RSS2