星期五, 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();

希望可以對有一樣需求的朋友有幫助。 有什麼問題也可以一起再討論。
張貼者： Unknown 於 6:44 下午 0 意見
標籤： ,

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。
張貼者： Unknown 於 6:29 下午 0 意見
標籤：

為什麼要寫?


看戲, originally uploaded by Fansia.

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

加油

張貼者： Unknown 於 5:21 下午 0 意見
標籤：

星期六, 11月 06, 2010

Have a Relax Breaklunch...



Have a Relax Breaklunch..., originally uploaded by Fansia.
天冷的時候來一杯熱紅茶真好。
今天來了公司看看書寫寫程式，也算愜意。
張貼者： Unknown 於 12:35 下午 0 意見
標籤：

星期四, 11月 04, 2010

Bye Bye FM2


Bye Bye FM2, originally uploaded by Fansia.

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

張貼者： Unknown 於 10:55 下午 0 意見
標籤：

星期四, 10月 21, 2010

English Listening Ability


*, originally uploaded by Fansia.

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

張貼者： Unknown 於 9:19 下午 1 意見
標籤：

星期三, 10月 20, 2010

七年之癢


*, originally uploaded by Fansia.

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

張貼者： Unknown 於 10:00 下午 3 意見
標籤：
訂閱： 文章 (Atom)