#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    102
    Rep Power
    16

    My Experience with Browser compatibility and HTML5 video.


    When I heard of HTML5 video I was quite excited, until now I have not had a chance to implement it. My first experience with it was frustrating to say the least. My goal was to have a single video available on the main page of a website Iím working on. The only requirements were for it to have a poster screen prior to and after playing. I researched the video formats and browser requirements and used Xmedia Recode to do all my encoding.

    Thanks to browser compatibility issues between ALL major browsers it turned 5 lines of HTML code into 75 lines of HTML and JS to work around all the issues everybody has.
    Here is the list of issues I came across while doing this.
    IE: will not display a splash screen unless the <source> tag is unable to play. That means donít put a source or put a webm or ogv default source.
    Chrome: Will not render the video unless controls are present.
    FF: would not play the video while the controls are present on load.
    No browser will display a poster image after the video has played.
    Here is the code I used; commented for your reading pleasure. Thanks to those here who pointed me in the right direction and offered a helping hand.

    Note: Iíve tested this with IE9-10, FF21, Chrome 27.0.1453.93 m and some random version of safari I found on a crapple laptop hiding around here somewhere. I'm only using MP4 and webm encodes because i want to be a rock star even thou most recomend using ogv as well.

    Code:
    <body>
      <cfajaximport />	
      <SCRIPT type="text/javascript">
        
      	function player(){	
    	//gets the video elements
    	var video = document.getElementById('video');
    	var testEl = document.createElement( "video" ),
    	mpeg4, h264, ogg, webm;
    	
                  //selects the filetype the browser supports
    	if ( testEl.canPlayType ) {
         // Check for MPEG-4 support
        mpeg4 = "" !== testEl.canPlayType( 'video/mp4; codecs="mp4v.20.8"' );
    
        // Check for h264 support
        h264 = "" !== ( testEl.canPlayType( 'video/mp4; codecs="avc1.42E01E"' )
            || testEl.canPlayType( 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' ) );
    
        // Check for Ogg support
        ogg = "" !== testEl.canPlayType( 'video/ogg; codecs="theora"' );
    
        // Check for Webm support
        webm = "" !== testEl.canPlayType( 'video/webm; codecs="vp8, vorbis"' );
    	}
    	
    	//sets the file source and type
    	if ( h264 == true ){
    		video.getElementsByTagName('source')[0].src = "/video test/video001.mp4";
    		video.getElementsByTagName('source')[0].type = "video/mp4";	
    		//alert("h264");
    	}
    	
    	else if ( webm == true){
    		video.getElementsByTagName('source')[0].src = "/video test/video001.webm";
    		video.getElementsByTagName('source')[0].type = "video/webm";
    		//alert("webm");				
    	}
    	
    	//play the video	
    	video.load();
    	video.play();
    	//shows the video controlls so the video is visible in Chrome.
    	video.setAttribute("controls","controls")
    		
    	}
    	
    	
      function finished(){		
    	//this will reload the div thus refreshing the poster screen
    	ColdFusion.navigate('/video test/video.cfm','videodiv','','','POST');	
    		 
      }	
      </SCRIPT>
    
    
    <CFDIV id="videodiv" name="videodiv">
    <video id="video" width="979" height="520" poster="/images/DiscoveryPortal.jpg" onclick="player();" onEnded="finished();">
      <source src="/video test/video001.webm" type="video/webm">  
      
      Your browser does not support the video tag.
    </video>
    </CFDIV>
    
    </body>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    1
    Rep Power
    0
    I made an account just so I could reply to you (and I will take a look around to see what this place is too!)

    I was getting ready to jump in to HTML5 video and have spent the morning reading about it and I am shocked.

    What a total mess!!! It's a disaster of in-fighting, patent law and vested interests. This is the polar opposite of how things should be and is especially galling given how important web video is. Frankly, we would be better off had we stuck to flash, with all it faults, as at least everyone knew where they stood and we didn;t have all this nonsense and bickering.

    A lot of the arguments I am reading have been going for years and I see no end to it soon.

    I think that this in-fighting is actually costing the protagonists more than if they would just settle on a format and pay what needed paying.

    For us developers it's a nightmare - I really hate it.

IMN logo majestic logo threadwatch logo seochat tools logo