HTML5 Video not Playing in Safari

1
votes

I've been working on an HTML5 video implementation, but I'm having some issues. I've been following the guide at http://diveintohtml5.info/video.html. I have encoded .m4v, .ogv, and .webm versions of all of the video. Chrome and Firefox have no troubles playing the video. When I attempt to play it in Safari, it loads the video container, but not the video. You see a white space where the video should be, the controls, and the "loading" text. In Web Inspector's network tab, the video's status is "pending" and the mime-type is "undefined". Interestingly, I only experience this problem on the staging site, while it works fine on my local dev.

When I visit the video directly in the browser on local dev, I get the following output in the console:

Resource interpreted as Document but transferred with MIME type video/x-m4v.
GET http://site.dev/content/videos/movie.m4v Plug-in handled load

Note that GET has a little red x to the left of it in the inspector.

My html code looks like:

<video class="html5-video" width="700" controls>
    <source src="content/videos/movie.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="content/videos/movie.webm" type='video/webm; codecs="vp8, vorbis"' />
    <source src="content/videos/movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
    Your browser does not support this video.
</video>

Additionally, the video is ~20mb.

Any thoughts? Thanks!

2
html5-video

2 Answers

4
votes

Well...it turns out that the issue occurred because I was using .htaccess to password protect the directory. Interestingly, all browsers except for Safari would allow access to the video files. Thanks to those who helped!

0
votes

Try encoding to mp4 and replace this file instead m4v format, update your code and run. Work's fine.