StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The problem seems to be that <strong>IE9 does not allow to add source tags dynamically</strong>. For some reason $('video').append(...) will not work for this element.</p> <p>you have to do something like this:</p> <pre><code>$('video').append('<source src="' + pathMp4 + '" type="video/mp4"><source src="' + pathWebm + '" type="video/webm">'); if(!$('video').children('source').length) { // set src&type attribute for ie9/android3.1 because it does not add the source child-elements $('video').attr('src', pathMp4 ).attr('type','video/mp4'); } </code></pre> <p>tested in iOS 4, Android 3.1 & 3.2 and the current versions of FF, Chrome, IE9, Opera and Safari(Win)</p> <p>.</p> <p>UPDATE Aug 2012 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</p> <p>wrote that comment long ago and still get up-/downvotes for it - since then I changed my mind about it: if you use javascript to begin with, simply use the native <code>$('video')[0].canPlayType("video/mp4")</code> (or "video/webm"; or w/o jQuery) to check which source fits and set it using the <code>$('video')[0].src(<URL>)</code> function. The only drawback is that you need a polyfill for Android 2.1 & 2.2 which weren't shipped with <code>canPlayType()</code>:</p> <pre><code>var ua = window.navigator.userAgent.toLowerCase(); if(ua.match(/android 2\.[12]/) !== null) HTMLMediaElement.prototype.canPlayType = function(type) { return (type.match(/video\/(mp4|m4v)/gi) !== null) ? 'maybe' : ''; } } </code></pre> <p>Thus, I would recommend against using <code><source></code> child-nodes if JavaScript is used anyways.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload