Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Probably the easiest and most practical way is to check the user agent to see if you're on Android.</p> <pre><code>if (navigator.userAgent.indexOf('Android') &gt;=0) { document.getElementById('myvideo').controls = true; } </code></pre> <p>In general, user agent sniffing is "frowned upon". It's <em>usually</em> best to use feature detection, since some far future version of the Android browser <strong>might</strong> support autoplay. But mobile browsers aren't usually very good at telling you when they don't support the video/audio spec.</p> <p>Another way to do it is to check for events. In FF/Chrome/IE9+, the event will fire a series of events, including: <code>loadstart</code>, <code>progress</code>, <code>durationchange</code>, etc... up to <code>play</code> and <code>playing</code>. In the Android browser (at least, the old-ish version that I have), the video will instead fire a <code>stalled</code> event. You could look for <code>stalled</code> and then enable the controls. You could remove them again when you get the 'play' event.</p> <pre><code>var video = document.getElementById('myvideo'), started = false; if (video &amp;&amp; video.addEventListener) { //in case of IE &lt; 9 video.addEventListener('stalled', function() { if (!started) video.controls = true; }, false); video.addEventListener('play', function() { started = true; video.controls = false; }, false); } </code></pre> <p>But there are other reasons why you might see that event, like a slow internet connection. So you'll still risk seeing the controls for a bit in a desktop browser until the video starts. </p> <p>You don't need to worry about iOS. It won't autoplay, even if you want it to.</p>
 

Querying!

 
Guidance

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