星期五, 2月 22, 2013

Inline Play Video With HTML5 in iOS and Android



Untitled, originally uploaded by Fansia.


背景

最近開始接觸寫手機上的網頁,發現跟 Desktop 上的網頁有很多 tricky 的地方。 尤其是不同的 browser 又在不同的 OS Version 上,行為又會有一些不同的差異。

剛好有同事有這樣的需求,想要在 iOS 及 Android 上利用 HTML5 製作 Video,但又希望可以 inline 播放。 同事實驗的結果是, Android 4.x 可以作到。iOS 及 Android 2.3.x 都會自動開啟 Native 的 Video Player 來播放影片。 據 Apple 官方的說法是,在 iPod 及 iPhone 這樣小尺寸的螢幕播放影片,為了良好的客戶體驗,系統會預設採用 Native 的 Player 來全螢幕播放。

因為前面提到,實作方式其實跟 OS or Browser 的版本也都有差別。 為了達到這個需求,我們先來看看目前這兩大陣營的分佈情況。 目前 Android 根據官方的資料,目前 Active Android Devices 最大宗除了 Android 4.X 就是Android 2.3.X。 iOS 就是 4, 5 and 6 都要能滿足才行。

實作

經過一個上午的 Google 及測試,目前只找到 for iOS 的 solution,Android 2.3.x 目前並沒有找到。

iOS

其實非常簡單,首先要在 video tag 加上這個 attribute: webkit-playsinline。

<video height="480" id="video" webkit-playsinline="" width="640">
</video>
實測發現,這樣還是無法播放,必須要利用 Javascript 控制播放才行。 如果要自動播放可以將底下的 code 放在 document.ready 的 event 下,或是作一個 button 來 trigger 播放的動作。

var video = document.getElementById('video');
video.play();

希望可以對有一樣需求的朋友有幫助。 有什麼問題也可以一起再討論。

window.onload v.s. $(document).ready v.s. $(window).load



Big Rainbow, originally uploaded by Fansia.


工作上有機會再把這三個 Event Handlers 再看一下,作一個簡單的比較。

來源


  • window.onload 定義在 HTML Specification
  • $(document).ready 和 $(window).load 來自 jQuery


功能


  • window.onload 和 $(window).load 被 Trigger 的時機點為當整個頁面都被完整 Loading, 包括 html, javascript, css 和圖片都下載完,連裡面的 iframe 裡的元素都要 load 完才會 trigger。
  • $(document).ready 則是在html download 後,DOM structure 被完整建立後則會被 trigger,不必等候其他元素下載。

例子


  • window.onload 的例子:


    1. 會在整個頁面 load 完,而且 body 內的圖片也都 download 完成了,才會 trigger 並執行 alert 。 
    2. 使用上要注意 window.onload 會有 overwrite 的現象,如下面例子就只會 alert 出 “onload2”。

<html>
  <head>
    <script>
      window.onload = function() {
          alert("onload1");
      }
      window.onload = function() {
          alert("onload2");
      }
      </script>
  </head>
  <body>
    <img src='http://test.com/haha.jpg' />
  </body>
</html>

  • $(document).ready 的例子:


    1. 執行的時機點為 DOM 建立完成後,不用等到圖片或其他元素下載完就會執行 alert。
    2. 不會有 overwrite 的現象,如下面例子會 alert 出 “onload1” and “onload2”。

<html>
  <head>
    <script>
        $(document).ready(function() {
            alert('document.ready1');
        });
        $(document).ready(function() {
            alert('document.ready2');
        });
      </script>
  </head>
  <body>
    <img src='http://test.com/haha.jpg' />
  </body>
</html>

使用時機


  • window.onload 和 $(window).load: 一般來說,除非一些特殊的情況,像要對圖片本身長寬作判斷作處理等等,不然幾乎都會利用 $(document).ready 來 binding 或執行其他 javascript codes
  • $(document).ready: 一般來說,在 DOM 建立完成後,就可以開始 binding 其他 event handlers。

為什麼要寫?


看戲, originally uploaded by Fansia.

最近一陣子在思考,職業生涯的下一步時,竟然有一種恐慌的感覺。 有一種在軟體業一路走來,從 Junior 到 Senior 卻沒辦法說出一項自己最最專長值得說嘴的技術。 仔細思考自己對軟體業還是非常有興趣的,畢竟面對各種科技新聞及技術還是會想了解。 對於手上正在作的專案及使用的技術也覺得還得心應手。 為什麼還是有一種 「不討厭,但也沒有愛到每天起床都期待上班」這樣的感覺。 前一份加入創業團隊的工作中,了解到最重要的事就是要找到自己的熱情所在。 所以我的熱情到底在哪裡呢? 這時候我的個性又讓這件事情變的難搞。 我總是對什麼東西都有興趣,作下去之後才發現原來也還好而已。 有時候想想,說不定只是鑽研得不夠深,無法在此中間得到足夠滿足我的成就感。 或者也只是我更貪心了,需要更大的成就感來滿足自己。 不管怎樣,我花了一個很長的時間仔細考慮未來。 5 年內,希望可以成為一個有國際觀的軟體業工程師或主管。 3 年內, 希望可以在大量數據運算(Hadoop..etc) 及Large Scale System Architecture Design 上有更深的知識及技術。 希望可以在這個期間內作的研究及工作歷程記錄在這裡。

加油

星期六, 11月 06, 2010

Have a Relax Breaklunch...



Have a Relax Breaklunch..., originally uploaded by Fansia.
天冷的時候來一杯熱紅茶真好。
今天來了公司看看書寫寫程式,也算愜意。

星期四, 11月 04, 2010

Bye Bye FM2


Bye Bye FM2, originally uploaded by Fansia.

FM2 是我的第一台單眼相機~
我從研一開始他就陪我東征西討的。
是我心中最可以信賴,拍出來也是quality最受我喜愛的相機。
雖然,是一台很難control的相機。
不過熟悉了以後,常我想對焦到哪裡,一轉就到位,非常聽話。
不買數位相機就是因為有FM2在手上,實在是很難接受數位相機。
前幾天過給我的麻吉阿冀,希望他可以好好對他。

星期四, 10月 21, 2010

English Listening Ability


*, originally uploaded by Fansia.

今天晚上上英文課,
老師給我們準備了好幾個不同 accents 的 materials 讓我們練習聽聽看。
什麼 British accent, Australian accent, Africa accent, Scottish accent...
結果發現都聽不懂耶~
同學還說大概 90% OK
該是每天早上早起聽bbc的時候了!

星期三, 10月 20, 2010

七年之癢


*, originally uploaded by Fansia.

我又忘了我們是交往七年還是八年了~
反正七年癢應該是過了的樣子。
該怎麼說好呢?
就是一段不長也不短的日子。
在七年前還是八年前的九月十號開始,
我們幾乎作什麼事都在一起。
在這七年還是八年內,台灣大哥大賺了我們不少錢~
我們幾乎每天都會講電話談談生活談談夢想。
一切好像都不是這麼久以前的事情,
感覺昨天才第一次在大學社團跟你見面;
感覺昨天才一起到地球村上課。
現在想想,你真的跟我很速配耶。