Member Avatar for daviddoria

After reading some tutorials it looks like this is how to embed a video with html5:

<html>

<body>

<video width="560" height="340" controls>
<source src="big_buck_bunny.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

</body>

</html>

(That video is in the same directory has the .html file)

When I do this, I see the control bar, but the video doesn't seem to load/play. Anyone know what could be wrong?

Thanks,

David

  • 3 Contributors
  • 2 Replies
  • 102 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by hindlist

Dani AI

Generated

Practical troubleshooting notes for (controls visible but no picture): this usually points to codec, server, or delivery issues rather than the HTML tag itself. ’s point about differing browser behavior is relevant; ’s referral to documentation is fine, but the most authoritative current reference for the element and supported formats is MDN: <video> element.

Common causes to check (quick checklist):

  • File/path: confirm the file actually loads (no 404) and opens in a native player. File extension alone doesn’t guarantee playable codecs.
  • Codec compatibility: broadly supported MP4 needs H.264 video + AAC audio. An MP4 with another codec will show controls but won’t decode.
  • Server headers: ensure the server sends the correct Content-Type (e.g., video/mp4) and supports range requests (necessary for seeking/progressive play). Misconfigured MIME types can break playback in some browsers.
  • Delivery context: serving over http(s) is preferred; some browsers limit features for file://.
  • CORS/security: cross-origin requests require appropriate Access-Control-Allow-Origin headers when the media is hosted elsewhere.
  • DevTools: the browser console and Network tab will typically show 404, CORS, or codec errors — that’s the fastest way to pinpoint the fault.

Concrete quick fixes and tests:

  • Run a simple local server to rule out file:// issues:
    python3 -m http.server 8000
  • If the file uses an incompatible codec, re-encode with ffmpeg (this produces a broadly compatible MP4 and moves metadata for progressive download):
    ffmpeg -i input.mov -c:v libx264 -profile:v baseline -level 3.0 -pix_fmt yuv420p -c:a aac -movflags +faststart output.mp4
  • Use multiple source formats as a fallback:
    <video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Browser does not support HTML5 video.
</video>

Recommended flow: confirm local playback, serve via HTTP, inspect devtools for errors (404/CORS/MIME), re-encode if codecs are unsupported, then re-test across browsers.

Recommended Answers

All 2 Replies

Member Avatar for almostbob

Browser support for html5 is limited and the implementation of those features that are supported in those browsers that partially support html5 are generally buggy, opera appears to be acing the implemntation race,

test your browser

Member Avatar for hindlist

Refer to w3schools to get the exact information.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.