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

    Join Date
    Apr 2009
    Posts
    113
    Rep Power
    16

    HTML 5 Video in Chrome


    My problem is quite weird. I've tested this in IE and Chrome. In IE it works as it should but in Chrome when i click to play my video the poster vanishes and nothing is displayed... The video is loading/buffering/playing in the background though. If i scroll my window up or down the video will display.

    Code:
    <body>
      <cfajaximport />	
      <SCRIPT>
      	function player(){
    		
    		video.src = "/video test/video001.mp4";
    		video.load();
    		video.play();
    		
    		}
    	
    	
    	 function test(){		
    		ColdFusion.navigate('/video test/video.cfm','videodiv','','','POST');		 
    		 }	
      </SCRIPT>
    
    
    <CFDIV id="videodiv" name="videodiv">
    <video id="video" width="979" height="520" poster="/munsch/images/DiscoveryPortal.jpg" onclick="player();" onEnded="test();" >
      <source src="" type="video/mp4">
      
      Your browser does not support the video tag.
    </video>
    </CFDIV>
    
    </body>
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Your JavaScript is poorly written. Don't treat IDs as global variables. It's one of IE's "misfeatures".

    Try this:
    Code:
      	function player(){
    		
    		var video = document.getElementById('video');
    		video.getElementsByTagName('source')[0].src = "/video test/video001.mp4";
    		video.load();
    		video.play();
    		
    		}
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    113
    Rep Power
    16
    Thanks for the pointer; i've changed this in my code. I'm still learning JS and it's coming slower than i'd like to admit. This still doesn't solve the issue in Chrome.

    This does raise an interesting question. I'm using this function so IE9 will display the poster image, otherwise it gets skipped. Looking at the code now, how will i switch between file types say if a FF browser loads the page?

    Why does IE have to make it so difficult.
    Last edited by Kravvitz; May 16th, 2013 at 06:59 PM. Reason: must we quote the whole post? :p
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    113
    Rep Power
    16
    Originally Posted by Kravvitz
    perfect! this is what i've been searching for... Thanks!
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    113
    Rep Power
    16
    All my problems solved today before 11am, this is a good Friday!

    So the issue is with Chrome, apparently it's a bug.

    http://stackoverflow.com/questions/9565363/video-element-disappears-in-chrome-when-not-using-controls

    DSFX.
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    You're welcome.

    Have they really not fixed that bug in over a year?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    113
    Rep Power
    16
    Originally Posted by Kravvitz
    You're welcome.

    Have they really not fixed that bug in over a year?
    I guess not because i'm running 26.0.1410.64 m and am still able to replicate this issue.

IMN logo majestic logo threadwatch logo seochat tools logo