1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Problem with HTML5 <video>-Tag

Discussion in 'HTML & JavaScript' started by Dove1992, Jul 17, 2014.

  1. Dove1992

    Dove1992 Newbie

    Joined:
    Apr 19, 2014
    Messages:
    21
    Likes Received:
    1
    Hello there.

    I am embedding a video on my page with this source code:


    <video>
    <source src="Example.webm">
    <source src="Example.mp4">
    <img src="Example.gif">
    </video>

    I added the <img>-Tag because I want the image to show for browsers that don't support HTML5.

    But my problem is that the GIF is loading everytime, even if the browser supports HTML5. This makes my site slow because I have a lot of videos on it.

    Is there a way to load the GIF-File only if the browser does NOT support HTML5?
     
  2. jazzc

    jazzc Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jan 27, 2009
    Messages:
    2,468
    Likes Received:
    10,143
    Post a jsfiddle.
     
  3. Dove1992

    Dove1992 Newbie

    Joined:
    Apr 19, 2014
    Messages:
    21
    Likes Received:
    1
    Sorry I don't understand. Can you help me?
     
  4. sirgold

    sirgold Supreme Member

    Joined:
    Jun 25, 2010
    Messages:
    1,260
    Likes Received:
    645
    Occupation:
    Busy proving the Pareto principle right
    Location:
    A hot one
    • Thanks Thanks x 1
  5. jazzc

    jazzc Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jan 27, 2009
    Messages:
    2,468
    Likes Received:
    10,143
    Go to http://jsfiddle.net, create an example with your problem and post the url. This makes it easy for others to test easily.
     
  6. Dove1992

    Dove1992 Newbie

    Joined:
    Apr 19, 2014
    Messages:
    21
    Likes Received:
    1
    It's only like this:

    <video>
    <source src="Example.webm">
    <source src="Example.mp4">
    <img src="Example.gif">
    </video>

    But I want the GIF only to load when the browser does not support HTML5.

    jsfiddle net/kJx4Y/
     
  7. jazzc

    jazzc Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jan 27, 2009
    Messages:
    2,468
    Likes Received:
    10,143
    To test the behavior, someone has to bother making an example with an actual video file. Guess who that 's not going to be.

    Anyway, in your fiddle, I see a black HTML 5 video element - no gif.
     
  8. Dove1992

    Dove1992 Newbie

    Joined:
    Apr 19, 2014
    Messages:
    21
    Likes Received:
    1
    Alright buddy, here you go:

    jsfiddle net/kJx4Y/2/
     
  9. jazzc

    jazzc Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jan 27, 2009
    Messages:
    2,468
    Likes Received:
    10,143
    It works as expected on latest Chrome|Win - checking with the inspector, the video is the one playing, not the gif.
     
  10. sirgold

    sirgold Supreme Member

    Joined:
    Jun 25, 2010
    Messages:
    1,260
    Likes Received:
    645
    Occupation:
    Busy proving the Pareto principle right
    Location:
    A hot one
    Working fine for me both on mac os x and linux chrome / firefox
     
  11. Dove1992

    Dove1992 Newbie

    Joined:
    Apr 19, 2014
    Messages:
    21
    Likes Received:
    1
    Yes guys, the .webm is playing for me, too.

    The problem is that the GIF is loading in the background anyways and makes my site slower. But GIF should only load if the browser does not support HTML5.
     
  12. jazzc

    jazzc Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jan 27, 2009
    Messages:
    2,468
    Likes Received:
    10,143
    You 'll need to write some javascript for that. Use Modernizr to detect browser capabilities.

    Have the video tag without the img -> if "doesn't support video", create an img element and insert it in the DOM.
     
  13. Dove1992

    Dove1992 Newbie

    Joined:
    Apr 19, 2014
    Messages:
    21
    Likes Received:
    1
    I don't have any idea of coding besides of HTML and CSS. I'll try to find a finished script already. Thank you jazzc!
     
    • Thanks Thanks x 1