FlyingSky

iOS html5 video

Jul 21, 2015

Some iOS html5 video experience. Actually I spent much time to handle some special cases for iOS html5 video element, but always forget after finishing my work. Next time I need to spend time to figure out the same issue. Now blog it to avoid to forget it again :)

Hide the play button on video center

This only works on iOS 8+, becuase lower version cannot find related shadow dom element.

<figure class="highlight"><pre><code class="language-css" data-lang="css">    <span class="nd">::-webkit-media-controls-start-playback-button</span> <span class="p">{</span>
    <span class="nl">display</span><span class="p">:</span><span class="nb">none</span> <span class="cp">!important</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></figure>

No touch event invoked when button on top of video element on iOS 7 and below.

I don’t find the real reason, but to solve this issue I have to hide it first, or move it to other place, when you click your own play button, then show it or move it back.

Video plays only invoked by user click manually

Video on iOS cannot be played automatically, because sometimes user uses cellular data, to save user’s money, video/audio only plays when use click it manually. If you want to use the play method of video/audio, you have to put it into the user’s manually click event handler. For example:

<figure class="highlight"><pre><code class="language-html" data-lang="html">    <span class="nt">&lt;button</span> <span class="na">onclick=</span><span class="s">"playVideo()"</span><span class="nt">&gt;</span>Play Video<span class="nt">&lt;/button&gt;</span>
</code></pre></figure>

<figure class="highlight"><pre><code class="language-js" data-lang="js">    <span class="kd">function</span> <span class="nf">playVideo</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">video</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">yourVideoId</span><span class="dl">"</span><span class="p">);</span>
    <span class="nx">video</span><span class="p">.</span><span class="nf">play</span><span class="p">();</span>
<span class="p">}</span>
</code></pre></figure>

You cannot play video in ajax callback, because it’s not in out of event handler. For example, in my case, when user click my play button, I will ask server to unzip a package which contains the target video, when it’s unzipped and uploaded to s3, I will start to play that video.

The solution is call video.play before your ajax call in the click event handler. Now the video has nothing to play, because the video.src is empty. Then call ajax to get video information, when the response is back, set video.src correctly.

<figure class="highlight"><pre><code class="language-js" data-lang="js">    <span class="nx">functio</span> <span class="nf">playVideo</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">video</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">yourVideoId</span><span class="dl">'</span><span class="p">);</span>
    <span class="nx">video</span><span class="p">.</span><span class="nf">play</span><span class="p">();</span> <span class="c1">// make sure your video.src is empty</span>
    <span class="nx">$</span><span class="p">.</span><span class="nf">ajax</span><span class="p">(</span><span class="dl">'</span><span class="s1">xxx</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="c1">// now you can update video.src to start to play the video</span>
        <span class="nx">video</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">your video source</span><span class="dl">'</span><span class="p">;</span>
    <span class="p">});</span>
<span class="p">}</span>
</code></pre></figure>

Same to AudioContext.

Video play inline in UIWebView on iPhone

You have to use attribute “webkit-playsinline” in video tag

  <video webkit-playsinline src="{youtubeUrl}" style="width: 100%; height: 100%;" controls="true" autoplay="" />

Also you have to set allowsInlineMediaPlayback to true in UIWebView.

If you don’t do that, it would play in full screen on iPhone.

Resources

Apple iOS html video

Related Posts