Member Avatar for Carlosherre 
            <video controls="controls" width="500" autostart="False">
                <source src="vid/Chantel.webm" type="video/webm" >
                <source src="vid/Chantel.mp4" type="video/mp4" >
                <source src="vid/Chantel_libtheora.ogv" type="video/ogg">
                <object data="vid/Chantel.mp4" width="500">
                    <embed src="vid/Chantel.swf" width="320" height="240"> </embed>
                </object>
            </video>
  • 6 Contributors
  • 8 Replies
  • 211 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by joe231

Dani AI

Generated

A compact, practical checklist for the Safari-only failures discussed above (references to , , and are noted): common causes are codec/container support, source order, server delivery (range requests / headers), and container indexing (moov atom). Moving MP4 above WebM is a valid quick test because Safari prefers MP4/H.264 (and the browser will pick the first source it can play). Also, autostart="False" is not a standard attribute — use the boolean autoplay when appropriate. (developer.apple.com)

Useful diagnostics (no framework changes required): inspect Safari’s Web Inspector → Console and Network. Confirm the video URL responds with a correct Content-Type (video/mp4, video/webm, etc.) and that range requests return 206 Partial Content. A simple header test:

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

If the Range request does not return 206 with sensible Content-Range / Accept-Ranges headers, progressive playback and seeking can fail. (rfc-editor.org)

If Safari downloads the entire file before playing, or playback stalls until the file finishes, the MP4 index (moov atom) may be at the end of the file. Repack the file so the index is at the start (faststart) and use baseline H.264 + AAC for best compatibility. Example ffmpeg transcode:

ffmpeg -i input.mov -c:v libx264 -profile:v baseline -level 3.0 -pix_fmt yuv420p \
  -c:a aac -b:a 128k -movflags +faststart -crf 23 output.mp4

This moves the moov atom and improves progressive playback. (ffmpeg.org)

Ensure correct MIME mappings on the server and follow autoplay/inline rules (muted + playsinline for inline autoplay on iOS). Also prefer MP4 for Safari and provide WebM/OGG fallbacks for other browsers. Reference reading: MDN’s media delivery guidance and Apple/WebKit notes on supported formats and autoplay behavior. (developer.mozilla.org)

Summary: confirm source order (MP4 first), validate headers/range support, re-encode with faststart if needed, and use standard attributes (autoplay, muted, playsinline) rather than nonstandard ones. These steps resolve the majority of Safari-only HTML5 video issues.

Recommended Answers

All 8 Replies

Member Avatar for Carlosherre

is anything wrong with it i need help ive done everything

Member Avatar for Octet

What doesn't work about it?
Seems fine when I try and use it on my web server.

(Also, no need to bump threads. They shall be answered in due time.)

Edited by Octet
Member Avatar for almostbob

lets get the obvious out of the way, to make sure it isnt a doh head-slap moment
\what doctype declaration it the file

Edited by almostbob
Member Avatar for JorgeM

Also some other obvious things to check... The relative paths you referenced are correct? There is a vid folder at the same level within the folder structure?

Member Avatar for Carlosherre

im using Ajax and im using a <!doctype> and then the normal usaul tags then i got this in bettween the body tag it works of firefox ive been playing around with the code and now it works on all browsers but Safari but thanks for you help ive igured a bit out

Member Avatar for joe231

and now it works on all browsers but Safari

Try moving the mp4 entry to the top of the list above webm

Member Avatar for <M/>

@joe, i think he has gotten a solution after 2 months?

Member Avatar for joe231

Fair enough :)

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.