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>
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.