filemonczyk filemonczyk - 1 month ago 9
HTML Question

Displaying mp4 file with html

Hello guys im struggling with displaying gif image in mp4 format:

<video width="320" height="240" >
<source src="http://media4.giphy.com//media//64zSh1uTE7xxm//100w.mp4" type="video/mp4"/>
</video>


that's my code, but only first frame is beeing loaded, then everything freezes.
//
edit
I have remade it into this:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1"/>
<title>Insert title here</title>
</head>
<body>
<video width="320" height="240" >
<source src="http://media4.giphy.com//media//64zSh1uTE7xxm//100w.mp4" type="video/mp4" autoplay/>
</video>
</body>
</html>


but still its static image.

edit2// I'have added

controls="controls"


since In XHTML, attribute minimization is forbidden, and the autoplay attribute must be defined as video autoplay="autoplay".

Answer

You need to play the video, too, because by default it will pause at 0:00. There are 3 possible solutions to this problem.

  1. Use the controls attribute (<video ... controls>) to show the controls and play it manually
  2. Use the autoplay attribute (<video ... autoplay>) to autmatically play the video once it has loaded
  3. Get the element via JavaScript and play it there (same behaviour as autoplay in this solution):

    var video = document.getElementById ("videoElement");
    video.addEventListener ("loadedmetadata", function () { video.play (); });
    

For further information on HTML5-Video attributes, check out MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video