HTML5 videos not working in Safari

Question

I just noticed that videos on my personal site aren't playing in safari. I've tried two computers and clicking play does nothing. They work fine in Chrome, Opera, and Firefox, but not in safari. Is it a codec/encoding issue?

Link: http://imwillryan.com/uiuc-timelapse.html

Code:

<video controls preload="none" poster="assets/video/poster_uiuc-timelapse.jpg" data-setup="{}">
     <source src="assets/video/uiuc-timelapse.mp4" type="video/mp4" />
     <source src="assets/video/uiuc-timelapse.ogv" type='video/ogg; codecs="theora, vorbis"' />
     <source src="assets/video/uiuc-timelapse.webm" type='video/webm; codecs="vp8, vorbis"' />
     Your browser does not support the HTML5 video tag. Try updating your browser or using a different one.
</video>

Answer 1

Usually that will work with having a single quote around the type attribute with nested double quotes for the codec. But sometimes that will not work cross browser. So sometimes you don't need to nest and mix double / single quotes for the type attribute for codecs.

I would try it without the nested double quotes in the single quote. And just use one quote.

Convert this:

type='video/ogg; codecs="theora, vorbis"'
type='video/webm; codecs="vp8, vorbis"'

Into this without the nested mix of double and single quotes for codec:

type="video/ogg; codecs=theora, vorbis"
type="video/webm; codecs=vp8, vorbis"

And all together, like this:

<video controls preload="none" poster="assets/video/poster_uiuc-timelapse.jpg" data-setup="{}">
   <source src="assets/video/uiuc-timelapse.mp4" type="video/mp4" />
   <source src="assets/video/uiuc-timelapse.ogv" type="video/ogg; codecs=theora, vorbis" />
   <source src="assets/video/uiuc-timelapse.webm" type="video/webm; codecs=vp8, vorbis" />
   Your browser does not support the HTML5 video tag. Try updating your browser or using a different one.
</video>

References

WHATWG website on source element. On WHATWG for the type attribute for source element, look at the examples and you will see some have nested quotes and some don't.

https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element

MDN website, Using HTML5 audio and video:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

So either use single quotes or double quotes but don't nest either or in each other, since sometimes it might not work cross browser.