HTML5 Video not Playing in Safari

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!

-------------Problems Reply------------

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!

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

Category:html5 video Views:2 Time:2011-12-21
Tags: html5 video

Related post

  • Event Listeners in HTML5 Video on the iPad Safari not working? 2010-06-14

    I've got this in the <head>: <script> function log(event){ var Url = "./log.php?session=<?php echo session_id(); ?>&event=" + event; xmlHttp = new XMLHttpRequest(); xmlHttp.open( "GET", Url, true ); xmlHttp.send( null ); } </

  • Can't serve HTML5 video through PHP on Safari/Mac (5.0) 2010-06-22

    I'm encountering a strange bug in Safari where, when I serve MP4 video through PHP (to obfuscate the file beneath the document root with a token-based authentication system), Safari for some reason fires the <video>'s onerror event, and the vid

  • 'a' links are not working on html5 Video tag in iPhone Safari 2011-08-19

    I am using html5 video tag for my mobile website in Safari browser. The video tag is working fine but I also have some 'a' links overlapping on that video. I have added those links with absolute position. When I click on the links, they are not worki

  • Removing the black bar on top and bottom of html5 videos in Chrome and Safari browsers 2012-02-03

    I am using html5 video. In FireFox it is running well but in chrome and safari, it is showing a thick black bar top and bottom. How to get rid of this bars? the code, <video autoplay loop="loop" onended="this.play()" width="100%"> <source sr

  • HTML5 Video poster attribute in Safari and Chrome 2010-07-13

    In Firefox the image specified by the poster attribute of the VIDEO tag remains on screen until the play button is pressed. However in the Webkit browsers (Safari and Chrome) the poster is dumped in favor of the first frame from the video as soon as

  • Black bars around edges of HTML5 video poster image in Safari on iOS7 2014-02-20

    I have added a poster image to a video, which is exactly the same dimensions as the video container itself: Video file information Video poster file information My HTML looks like this (deliberately no width and height specified as I want the video t

  • iPad Safari mobile seems to ignore z-indexing position for html5 video elements 2010-09-10

    I got a video element on a page that's working fine both in safari mobile and desktop. I have a seme-transparent pull-down menu that's working fine. The problem is, when the menu is over the video element, on the desktop safari i can see the video un

  • html5 videos not playing in chrome and safari in stage 2011-09-28

    i have a problem in playing html5 videos in chrome and safari in stage.Local its playing all browsers.its playing after 10 to 15 mints in chrome and safari in stage .but in stage firefox playing currcetly.Pls help to me .Here i have pasted my code.

  • HTML5 video - Play event not firing 2012-04-17

    I currently have an HTML5 video event issue in Safari. I am playing a single video on my page. The video loads and plays correctly. However, the play event does not always fire. If the user: Clicks play Watches the video to the end (ended event fires

  • GWT & HTML5 Video in Mobile Safari 2010-04-09

    I'm trying to code a site in GWT that plays videos with HTML5. Everything works great on the desktop, but mobile Safari on both the iPhone and iPad do not play the video. I can play a video using Video for Everybody. I've even copied the code to my o

  • Single PHP "exit;" statement prevents HTML5 video in Safari 2010-06-24

    Bizarre bug: in a PHP script that serves video files, I have a few test conditions (authenticate token, make sure file exists, etc.) before sending a "video/mp4" header and outputting an MP4 file. If any of the tests fail, $fail is given a non-false

  • use html5 video player only if browser is Safari 2011-01-21

    I would like to use the html5 video tag only if the users browser is Safari, and if it is not, use a flash video player. The code below does not work (<!--[if Safari]> conditional is not valid), but it may give you an idea of what i am looking

  • html5 video = safari wants to download it all 2011-03-01

    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

  • HTML5 video player behavior on iPhone and iPod in Safari Web Apps 2011-03-25

    On the iPhone and iPod, if a YouTube video is embedded in a web page, the user can touch the video and the video will start playing—the iOS media player slides in and the video plays full screen in landscape orientation. Once the video has finished p

  • Embedding HTML5 video for Mobile Safari on an iPhone 3GS vs an iPhone 4 2011-04-19

    I have an H.264/AAC encoded video in an mp4 file on the server, the mime-type video/mp4 is added to the web server (IIS 7), and I have a page with a video tag: <video id="html5-video" width="360" height="202" poster="/images/poster.png" controls

  • Mobile Safari HTML5 video - event listener 'ended' does not fire the 2nd time 2011-04-21

    I am trying to add a button when pressed will play a video, and when the video ends an image is displayed. The problem is that the 2nd time i press the button, the video ends, and nothing happens as if the event listener does not get called. var vide

  • Html5 Video with Safari 5.0.5 does not work (mp4) 2011-11-07

    I am currently working on a Intranet application where the majority of the users works with Safari 5.0.5 on Mac OS X 10.6.8. One of the applications tasks is to show different mp4 videos to the user. I am using the HTML5 video tag for that purpose. M

  • safari mac wont stream HTML5 video 2011-11-07

    I am having a very frustrating issue with HTMl5 video and safari/mac. I am using html5 video throughout the site where needed and it works/plays on every browsers bar safari on a mac (its fine on safari windows and chrome mac for example) The videos

  • iPad Safari ignores div onlick above html5 video 2011-12-26

    I've a problem making div element clickable. I've a HTML5 video on screeen, after video end event I create some div element positioned above video with z-index property. On taping this divs nothing happens, but if this divs are positioned not above v

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.136 (s). 11 q(s)