Member Avatar for maxelcat

Hi

I have "performed" my frst venture into html5 video using the video for everyone and it works well in IE, Opera, Saf, Chrome, FF.

I have one small question - Safari (at least on my windows laptop) seems to want to download the whole darn video before it shows the first frame, or the buttons work - all the others stream it in the way I was expecting.

Has anyone got any ideas why - or more important how I get it to work more effectively!

Here's the code

<video width="320" height="240" controls>
	<!-- MP4 must be first for iPad! -->
	<source src="http://www.visievoorisrael.nl/images/stories/jos01/video/rootsAndReflections002b.mp4video.mp4" type="video/mp4" /> <!--Safari / iOS video    -->
	<source src="http://www.visievoorisrael.nl/images/stories/jos01/video/rootsAndReflections002.theora.ogv" type="video/ogg" /> <!-- Firefox / Opera / Chrome10 -->
	<!-- fallback to Flash: -->

Thanks in advance

E

  • 2 Contributors
  • 2 Replies
  • 437 Views
  • 4 Years Discussion Span
  • Latest Post Latest Post by Cheerful_1

Dani AI

Generated

A compact checklist and quick fixes that prevent Safari from trying to fetch an entire MP4 before playback. later confirmed the problem was solved; the steps below give repeatable diagnostics and preventive fixes so the same behavior does not reappear on other hosts or encoders.

First, verify the server supports HTTP byte-range requests. Use curl to inspect headers and to request a small byte range; a working setup will return Accept-Ranges: bytes and a 206 Partial Content response to a range request:

curl -I https://example.com/video.mp4
curl -H "Range: bytes=0-1023" -i https://example.com/video.mp4

If the range request gets a 200 OK with the full file, the server or delivery script is not serving partial content and browsers may fall back to downloading the whole file. MDN: HTTP range requests. (developer.mozilla.org)

If the file itself was written without web-optimized metadata, remux it (no re-encode) so browsers can start playback early. The common ffmpeg remux command is:

ffmpeg -i input.mp4 -c copy -movflags +faststart output.mp4

That moves the file index to a streaming-friendly position; many encoders call this option “web optimized” or “fast start.” Use the official FFmpeg docs for details. FFmpeg formats: movflags faststart. (ffmpeg.org)

If files are served via a script (PHP, Python, etc.), make sure the script implements Range handling (forward Range requests and return 206 and Content-Range), and confirm the Content-Type header is video/mp4. For large or production deployments, consider HLS (HTTP Live Streaming) instead of single-file progressive download; HLS gives reliable start/seek and adaptive quality on Apple platforms. Apple: HTTP Live Streaming guide and MDN: <video> element notes. (developer.apple.com)

A note on tools: third-party downloaders don’t fix server/encoding issues. If problems persist, post the exact curl -I and Range responses and an ffprobe output for one problematic file for targeted troubleshooting.

Member Avatar for maxelcat

I have sorted this now - apprently with some encoders the meta data for mp4's is put at the end of the file. I used a little application called QTIndexSwapper2 which was a breeze and it all works now

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.