www.webdeveloper.com
Results 1 to 9 of 9

Thread: HTML5 Video will not display

  1. #1
    Join Date
    Apr 2008
    Posts
    136

    HTML5 Video will not display

    Trying to familiarize myself with HTML5 video. Cannot get a video or buttons to display in any browsers.

    http://goken68.brinkster.net/html5Vi...avascript.html

    Code:
    <!doctype html>
    <html>
    <head>
    <title>HTML5 Video with Javascript</title>
    </head>
    
    <body>
    
    <div>
    <video id="vwVideo" width="420">
    
    <source src="http://goken68.brinkster.net/Videos/Volkswagen.mp4" type="video/mp4">
    
    <source src="http://goken68.brinkster.net/Videos/Volkswagen.ogg" type="video/ogg">
    
    <source src="http://goken68.brinkster.net/Videos/Volkswagen.webm" 
    
    type="video/webm">
    <br />
    <br />
    <button onClick="playPause()">Play/Pause</button>
    <button onClick="enlarge()">Enlarge</button>
    <button onClick="shrink()">Shrink</button>
    <button onClick="regular()">Regular Size</button>
    
    </video>
    </div>
    
    <script>
    
    var myVideo = document.getElementById("vwVideo");
    
    function playPause()	{
      if (myVideo.paused)
          myVideo.play();
      else
          myVideo.pause();
    }
    
    function enlarge()	{
      myVideo.width = 600;
    }
    
    function shrink()	{
      myVideo.width = 300;
    }
    
    function regular()	{
      myVideo.width = 420;
    }
    
    
    </script>
    
    </body>
    
    </html>

  2. #2
    Join Date
    Oct 2013
    Posts
    486
    HTML Code:
    <!doctype html>
    <html>
    <head>
    <title>HTML5 Video with Javascript</title>
    </head>
    
    <body>
    
    <video id="vwVideo" width="420" controls="controls">
    
    <source src="http://goken68.brinkster.net/Videos/Volkswagen.mp4" type="video/mp4">
    
    <source src="http://goken68.brinkster.net/Videos/Volkswagen.ogg" type="video/ogg">
    
    <source src="http://goken68.brinkster.net/Videos/Volkswagen.webm" type="video/webm">
    
    </video>
    
    </body>
    
    </html>
    Last edited by Kevin2; 06-30-2014 at 09:50 PM. Reason: [/html] ...

  3. #3
    Join Date
    Oct 2013
    Posts
    486
    OK, nevermind. Works in Chrome and IE11, but not Firefox.

  4. #4
    Join Date
    Apr 2008
    Posts
    136
    Kevin2 - You re-posted my code except for the <script> </script> and the <button> tags. Don't know what you are suggesting.

  5. #5
    Join Date
    Oct 2013
    Posts
    486
    Notice controls="controls". Should take the place of the JS.

  6. #6
    Join Date
    Oct 2013
    Posts
    486
    This works in Chrome and IE11, but again, not FF:

    HTML Code:
    <!doctype html>
    <html>
    <head>
    <title>HTML5 Video with Javascript</title>
    </head>
    
    <body>
    
    <div>
    <video id="vwVideo" width="420">
    
    <source src="http://goken68.brinkster.net/Videos/Volkswagen.mp4" type="video/mp4">
    
    <source src="http://goken68.brinkster.net/Videos/Volkswagen.ogg" type="video/ogg">
    
    <source src="http://goken68.brinkster.net/Videos/Volkswagen.webm" type="video/webm">
    
    </video>
    <br />
    <br />
    <button onClick="playPause(vwVideo)">Play/Pause</button>
    <button onClick="enlarge(vwVideo)">Enlarge</button>
    <button onClick="shrink(vwVideo)">Shrink</button>
    <button onClick="regular(vwVideo)">Regular Size</button>
    </div>
    
    <script>
    
    
    function playPause(el)	{
      if (el.paused){
          el.play();
      }
      else{
          el.pause();
      }
    }
    
    function enlarge(el)	{
      el.width = 600;
    }
    
    function shrink(el)	{
      el.width = 300;
    }
    
    function regular(el)	{
      el.width = 420;
    }
    
    
    </script>
    
    </body>
    </html>
    Last edited by Kevin2; 06-30-2014 at 11:11 PM.

  7. #7
    Join Date
    May 2014
    Posts
    912
    Try moving the .webm one first. FF's MP4 support has always been sketchy/incomplete/buggy -- sometimes it will detect "yes I can play MP4 containers" on files that it doesn't actually support the codecs used to make the file.

    Also, double-check the mime-types being sent from your server. It seems like the MP4 and WebM are being sent as text/plain, and FF can be REALLY (and annoyingly) picky about that.

    Correction, your MP4 is being sent as application/octet-stream, which is ALSO incorrect.
    Java is to JavaScript as Ham is to Hamburger.

  8. #8
    Join Date
    Apr 2008
    Posts
    136
    Thank you both.

    I tried moving .webm first. Now, in Firefox, the buttons display and the audio portion works when clicking "Play/Pause", but no video.

    http://goken68.brinkster.net/html5Vi...avascript.html

    Code:
    <!doctype html>
    <html>
    <head>
    <title>HTML5 Video with Javascript</title>
    </head>
    
    <body>
    
    <div>
    <video id="vwVideo" width="420">
    
    <source src="http://goken68.brinkster.net/Videos/Volkswagen.webm" type="video/mp4">
    
    <source src="http://goken68.brinkster.net/Videos/Volkswagen.mp4" type="video/ogg">
    
    <source src="http://goken68.brinkster.net/Videos/Volkswagen.ogg" type="video/webm">
    </video>
    <br />
    <br />
    <button onClick="playPause(vwVideo)">Play/Pause</button>
    <button onClick="enlarge(vwVideo)">Enlarge</button>
    <button onClick="shrink(vwVideo)">Shrink</button>
    <button onClick="regular(vwVideo)">Regular Size</button>
    
    </div>
    
    <script>
    
    function playPause(el)	{
      if (el.paused)
          el.play();
      else
          el.pause();
    }
    
    function enlarge(el)	{
      el.width = 600;
    }
    
    function shrink(el)	{
      el.width = 300;
    }
    
    function regular(el)	{
      el.width = 420;
    }
    
    
    </script>
    
    </body>
    
    </html>

  9. #9
    Join Date
    May 2014
    Posts
    912
    Try seeing if setting a height helps show the video. FF can be... quirky about that, refusing to auto-calculate an appropriate height.

    Silly question -- what codecs are you using inside those containers? Is your .webm VP8 or VP9 video?

    Remember, .webm, .ogg and .mp4 are just container formats, and can contain different encodings that may or may not be supported.

    Check the MDN reference on that:
    https://developer.mozilla.org/en-US/..._media_formats

    I just checked, your OGG file isn't big enough to contain video, and seems to just be a vorbis AUDIO stream. For some reason FF and Opera here are using that video-less OGG file skipping right over the .webm file.

    I do think the mime-types are messing with it; they're NOT being sent properly.
    Last edited by deathshadow; 07-01-2014 at 08:15 PM.
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles