CODEWITHSUNDEEP
javascriptjqueryhtmlsafarihtml5-video
edepperson
edepperson

Reputation: 1035

Video tag not working in Safari now

The code below makes the video tag work in IE9, Chrome and Firefox. However I cant get it to work in Safari

<video width="400" height="300" controls="controls" poster="ContractorTestingVideos/cntrtest1.jpg">
  <source src="http://1.1.1.1/Intranet/ContractorTestingVideos/cntrtest1.ogg" type="video/ogg; codecs='theora, vorbis'"></source>
  <source src="http://1.1.1.1/Intranet/ContractorTestingVideos/cntrtest1.ogg" type="video/webm; codecs='vp8, vorbis'"></source>
  <source src="http://1.1.1.1/Intranet/ContractorTestingVideos/cntrtest1.m4v" type="video/x-m4v"></source>
  <source src="http://1.1.1.1/Intranet/ContractorTestingVideos/cntrtest1.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'"></source>
</video>

So for Safari, I tried this,

<video width="400" height="300" controls="controls" poster="ContractorTestingVideos/cntrtest1.jpg" src="http://1.1.1.1/Intranet/ContractorTestingVideos/cntrtest1.mp4"></video>

Still doesn't work. I did paste the url directly into a Safari address bar and it did bring back the video and play it.

Any ideas on how to get the html5 video tag to work in safari? My Safari build is 5.0.5(7533.21.1) and I am working on a 64 bit virtual machine, OS is Windows 7

Upvotes: 1

Views: 3599

Answers (3)

Navin Solanki
Navin Solanki

Reputation: 36

//https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari
<picture>
    <source srcset="explosion.mp4" type="video/mp4">
    <img src="explosion.jpg" alt="An image of an explosion.">
</picture>

//it sove your issue, it work only in safari
//to check browser is safari or not use 
// this if condition
// if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0)

Upvotes: 0

todoslocos
todoslocos

Reputation: 11

MP4 is supported by Safari Desktop but you need Quicktime installed to make it work which is a no-no, you cant force your clients to install quicktime..

you better think about a flash fallback, include this into your video tag

 <object type="application/x-shockwave-flash" data="video/video.swf" id="video_background">
    <param name="movie" value="video/video.swf" /></object>

NOTE: iOS doesnt all the profiles that h.264 provides

Source: HTML5 mp4 video working in Chrome and Desktop Safari but not iPhone

Upvotes: 1

Brid
Brid

Reputation: 181

Try rearranging your list of video sources to that your .mp4 videos come first. For some reason, I've never been able to get a video to play on Mobile Safari, and rarely on desktop Safari, without doing that.

Like this: 

<video width="400" height="300" controls="controls" poster="ContractorTestingVideos/cntrtest1.jpg">
  <source src="http://1.1.1.1/Intranet/ContractorTestingVideos/cntrtest1.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'"></source>
  <source src="http://1.1.1.1/Intranet/ContractorTestingVideos/cntrtest1.ogg" type="video/ogg; codecs='theora, vorbis'"></source>
  <source src="http://1.1.1.1/Intranet/ContractorTestingVideos/cntrtest1.ogg" type="video/webm; codecs='vp8, vorbis'"></source>
  <source src="http://1.1.1.1/Intranet/ContractorTestingVideos/cntrtest1.m4v" type="video/x-m4v"></source>
</video>

Upvotes: 4

Related Questions