CODEWITHSUNDEEP
htmlgifmp4
filemonczyk
filemonczyk

Reputation: 1703

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".

Upvotes: 3

Views: 4753

Answers (4)

user2886487
user2886487

Reputation: 1

Add the autoplay property to the video tag, e.g.:

<video width="320" height="240" autoplay>

Upvotes: 0

NikxDa
NikxDa

Reputation: 4187

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

Upvotes: 3

david-schor
david-schor

Reputation: 260

You forgot the full construction. 

<video width="320" height="240" controls> </video>

instead of controls you can use other attributes.

  • autoplay - Specifies that the video will start playing as soon as it is ready
  • controls - Specifies that video controls should be displayed (such as a play/pause button etc).
  • height- Sets the height of the video player
  • loop - Specifies that the video will start over again, every time it is finished
  • muted - Specifies that the audio output of the video should be muted
  • poster - Specifies an image to be shown while the video is downloading, or until the user hits the play button
  • preload - Specifies if and how the author thinks the video should be loaded when the page loads
  • src - Specifies the URL of the video file
  • width - Sets the width of the video player

For more informations go to: w3schools

Upvotes: 0

Jerrybibo
Jerrybibo

Reputation: 1325

I'm not too proficient in HTML myself, but I've experienced this problem too. The reason why the video is frozen on the first frame is because, by default, the video is paused at 0:00, which means it will simply not play without user intervention or code to play itself. There are two solutions to this:

  1. Either include controls to this video, which can be done by changing the <video width="320" height="240"> to <video width="320" height="240" controls> or
  2. Include autoplay by adding the autoplay attribute, which can be done by again changing <video width="320" height="240"> to <video width="320" height="240" autoplay>.

Hope this helped!

Upvotes: 2

Related Questions