Problem with HTML5 <video>-Tag

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

  1. Doverembrigal

    Doverembrigal BANNED BANNED

    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,820
    Likes Received:
    12,477
    Occupation:
    Potentate
    Location:
    Asuncion
    Post a jsfiddle.
     
  3. Doverembrigal

    Doverembrigal BANNED BANNED

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

    sirgold BANNED BANNED

    Joined:
    Jun 25, 2010
    Messages:
    1,260
    Likes Received:
    647
    Go onto http://jsfiddle.net/ and post yer code...
     
    • Thanks Thanks x 1
  5. jazzc

    jazzc Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jan 27, 2009
    Messages:
    2,820
    Likes Received:
    12,477
    Occupation:
    Potentate
    Location:
    Asuncion
    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. Doverembrigal

    Doverembrigal BANNED BANNED

    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,820
    Likes Received:
    12,477
    Occupation:
    Potentate
    Location:
    Asuncion
    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. Doverembrigal

    Doverembrigal BANNED BANNED

    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,820
    Likes Received:
    12,477
    Occupation:
    Potentate
    Location:
    Asuncion
    It works as expected on latest Chrome|Win - checking with the inspector, the video is the one playing, not the gif.
     
  10. sirgold

    sirgold BANNED BANNED

    Joined:
    Jun 25, 2010
    Messages:
    1,260
    Likes Received:
    647
    Working fine for me both on mac os x and linux chrome / firefox
     
  11. Doverembrigal

    Doverembrigal BANNED BANNED

    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,820
    Likes Received:
    12,477
    Occupation:
    Potentate
    Location:
    Asuncion
    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. Doverembrigal

    Doverembrigal BANNED BANNED

    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