blog.Ring.idv.tw

HTML5 video autoplay on iOS

HTML5 video autoplay on iOS


許多時候我們在使用iPhone/iPad瀏覽一些包含HTML5 video的網頁時,會發現為何網頁中的video都不會自動播放?而使用一般PC平臺上的瀏覽器卻又都能自動播放?

根據iOS-Specific Considerations的說明如下:

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, 
preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods 
are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. 
In other words, a user-initiated Play button works, but an onLoad="play()" event does not.

簡單來說~ 其實主要是用來防止「以量計價」的行動網路費爆增~ 這考量的確沒錯! 但是為何不將此功能改為可選項開關呢?因為現階段有許多採用資費吃到飽方案或是用WiFi網路的客群,若能提供可選項開關或是像使用GPS定位一樣的作法,主動彈出一個confirm視窗來提示是否允許自動播放也不失為一種方式呀!

所以~ 現階段如果想在iPhone/iPad瀏覽器中播放video那就得透過使用者觸發才行... Orz 話雖如此,但其實還可以透過另一種方式來達到video自動播放,那就是透過UIWebView元件來達成,也就是說~ 如果你是採用PhoneGap開發的應用程式,那恭禧你~ 只需要對AppDelegate.m 原始碼加上下述設定:

theWebView.allowsInlineMediaPlayback = YES;
theWebView.mediaPlaybackRequiresUserAction = NO;

同時也需要針對你的video element加上「webkit-playsinline」attribute即可,如:

<video id="video" src="xxx.mp4" autoplay webkit-playsinline></video>

現在開啟你的App就能看到video自動播放!

不過iOS Safari針對Canvas的支援仍有些不足~ 所以上述HTML5 Canvas&Video: Big Buck Bunny範例就算移植到UIWebView仍然無法看到效果的~ 因為iOS Safari針對Canvas少了下述APIs的支援:

void drawImage(HTMLVideoElement image, double dx, double dy);
void drawImage(HTMLVideoElement image, double dx, double dy, double dw, double dh);
void drawImage(HTMLVideoElement image, double sx, double sy, double sw, double sh, double dx, double dy, double dw, double dh);

如此就只能被迫將video轉成一張張image才能達到類似的效果了...

參考資源

UNSOLVED HTML5 VIDEO ISSUES ON IOS

iPad and iPhone html5 video autoplay

2012-01-04 10:41:59

Leave a Comment

Copyright (C) Ching-Shen Chen. All rights reserved.

::: 搜尋 :::

::: 分類 :::

::: Ads :::

::: 最新文章 :::

::: 最新回應 :::

::: 訂閱 :::

Atom feed
Atom Comment