本部落格已搬家
點此前往新部落格

新主機測試中...

Your posts match “ Flash ” tag:

行動版網頁不就是把網頁縮小而已嗎?

這篇不講 coding 技巧,不講用 SASS 要怎麼寫,不講 Bootstrap 要怎麼用,不講各種 framework 怎樣達成 RWD 的原理。只是一份講行動版網站與做一般網站有何差異的概覽。

本簡報適合瀏覽對象:
- 覺得行動版網頁只是把網頁縮小而已,沒什麼的人
- 為了學 RWD 還花錢跑去上課的人
- 不知道設計行動版網站有什麼眉角的初學者
- 被指派做行動版網站,不知從何開始的菜鳥美工

本文摘要:
RWD(Responsive Web Design)技術概論與行動網頁設計注意事項

  • 基本心法1 – 流動布局
  • 內的設定
  • 判斷使用者
  • 基本心法2 –Media Query
  • Media Query & Media Type
  • Media Query - device-pixel-ratio
  • 掌握解析度-慎選 Breakpoint
  • Table 如何 RWD
  • 選單如何 RWD
  • 行動裝置上的網頁動畫
  • 圖片也要RWD
  • 圖示也要RWD
  • 嵌入多媒體也要 RWD
  • 設定Flash替代內容
  • 表單準備好了嗎?
  • 按鈕準備好了嗎?
  • 網頁原本用的Plugins準備好了嗎?
  • 文書人員上資料時要小心
  • 測試工具

以現實來說,
企業主真的有在乎他的客戶會用手機來看他們的網站嗎?

設計理念什麼的都是 bullshit,
只願意花30元吃滷肉飯的客人,還要講求健康純天然、服務品質、賓至如歸?

以大局來說,
東西有多難做什麼的沒人會care,就一句話,做不做得出來?


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


做網頁設計該學 Flash 嗎?

每隔一陣子就會聽到有人問 :
「我想做網頁設計,人力銀行很多徵才條件都註明要會 Flash,那我應該要去學嗎 ?」

Flash 在前幾年的確風光一時,比如說七八十年次小時候都看過的阿貴、詰譙龍、小小系列動畫;還有各種活動網站、小遊戲、課本附的多媒體光碟教材、網頁廣告,2advanced 風格的全 Flash 網站,甚至是網路詐騙彈出廣告,處處可見 Flash 的蹤跡。

Flash 優點挺多的,說對設計師而言,可以用滑鼠直覺的拖拉,所見即所得,動畫製作流程十分方便。對工程師而言,可以用程式碼來控制。而且範例多、素材多,Flash 時代的設計師,硬碟裡都有幾個相簿程式或特效選單範例吧?

畫面上的東西當然不會平白無故變出來,Flash 跟 Adobe 系列平面設計軟體的格式整合性也相當不錯。除了可以處理點陣圖素材,也可使用向量圖形技術,可以有效節省網路頻寬和下載時間的檔案。對一些網拍商城的美工而言,Flash 甚至還可以匯出 gif 動畫呢! 另外 Flash 還有一些內嵌字體功能的功能,可以無視什麼解析度與瀏覽器版本,讓 PC 不管用什麼瀏覽器都可以看到一樣的畫面。

Flash 雖然可以做出許多不錯的視覺與互動效果,但是後來卻產生一些其他問題。例如一些新手做的 Flash 容易造成電腦 CPU 使用率飆高,而且 Flash 的效能在一些真正複雜的場景也不盡理想,例如電腦組裝討論區常看到「FB 上網文書機」跑不動開心水族箱的文章。

還有設計師從亂寫也能動的 Action Script 2,轉移到物件導向 Action Script 3 的陣痛期。甚至後來行動裝置崛起,2010 年4 月,賈伯斯宣布不在 iOS 中支援 Flash 內容。2011 年 11 月 9 日,Adobe 也宣布終止開發行動版本的 Flash Player。Android 也在系統更新後逐步封鎖 Flash,一般老百姓根本不知道如何在自己手機或平板上顯示 Flash 的內容,就算硬是讓行動裝置執行 Flash,也是增加卡頓、耗電的情況罷了。

賈伯斯封殺 Flash 的消息出來的時候,我還是大學生,老師還會在網頁設計課教 Flash,當年一看到新聞,大家都在想: 難道奶綠茶大大要失業了嗎? 從那時候到現在也只過了 5 年,賈伯斯已作古,未來要怎樣也還很難說。

所以,Flash 真的就沒必要學了嗎?
現在去相關行業工作,完全不會 Flash 也沒關係嗎?

其實就算在 2015 年,還是可以常常碰到 Flash 的,有以下用途 :

1.舊網站還有一堆 Flash 要維護
並不是說今天有了新技術,那些舊技術做的東西馬上會消失。今天新市長上任,那些八年遺毒就會消失。以前那些 Flash 做成的網站難道都不需要更新跟維護嗎?
一個網站可能會有新的活動、新的產品、新的技術認證、新的聯絡資訊 (Line、微信等)、這些都需要會用 Flash 的人員去維護。

雖然也有許多業主都有想要讓自己的 iPhone 也看得到自家網站,或是製作所謂 RWD 的行動網站,但是一聽到重新製作網站的報價,就退縮了,覺得網站這種東西,求有不求好,網站更新也無法幫助他的生意,於是還有許多 Flash 網站還在撐。

另外因為 Flash CC 逐漸升級之後就不支援太舊的檔案編譯,所以有些設計公司會同時共存 CC 與 CS 系列版本的 Adobe 軟體。那對於初學者而言,要學 CS 還是 CC 版本的 Flash 操作呢? 這又是一個問題。

2.多媒體廣告有時候會用 Flash 來的製作
現在電子商務已經進入紅海時代,你賣的商品或服務是其他人也有的,想要做一個網站,就等著在家數鈔票,基本上就是緣木求魚的事。品牌更大,東西更好的都在做廣告,憑什麼認為自己不做廣告就可以賣贏別人?

把自己的產品跟服務做得完美,理論上來說是不可能的。於是網路行銷更加的重要,最常見的就是找粉絲團或部落客寫手,或是買搜尋引擎關鍵字廣告,預算更多的會買多媒體聯播網廣告、Youtube 影片廣告。


多媒體聯播網廣告的特性在於當使用者瀏覽新聞,或是上網看文章時,網頁旁邊的廣告版位會不時出現廣告,有助於新品牌提高能見度,或是發掘出消費者潛藏的慾望。現在有許多大型網路商城也會跟廣告商合作,業主只要在商城上架商品,就有機會在聯播網廣告中看到上架的商品。

廣告的類型,除了純文字廣告、圖像廣告,也有 HTML5 廣告、影片廣告、Flash 廣告。基本上設計公司、多媒體公司、網路行銷公司,只要不是走純平面設計的,基本上都有這種製作廣告的業務內容。因為這種廣告也可以選擇投放到手機或平板上,所以用 Flash 製作的比例會降低,而且要是沒設定廣告受眾裝置,如果廣告到達頁面是Flash,那廣告費基本上是成效不大的。至於哪一天 Flash 廣告會完全消失? 等 Google Adwords 哪一天突然宣布不支援 Flash 廣告,大概才有機會吧! 連 IE6, IE7 現在都還陰魂不散,論消失哪輪到 Flash 呢?

3.Flash 可用於單機程式與行動裝置 APP 開發
前面不是才說行動裝置不支援 Flash 嗎? 事實上 Adobe 有發展一個 AIR 技術,只要使用者在電腦或行動裝置上安裝 Adobe AIR ,就有機會在電腦或 Android 裝置上,把用 Flash / Flash Builder / Flex 製作的內容,當成應用程式來使用。

除了 Adobe AIR for android,也有 Adobe AIR for iOS,但是論執行效能、相容性,還有維護與開發的成本,可能還不如直接用原生的開發工具或程式碼來撰寫。通常是那種有許多 Flash 豐功偉業(歷史包袱)的公司或團隊,想要在行動裝置時代無縫接軌才會想這樣做。

4.活動網站或宣傳製作會用到 Flash
現在網頁設計,還有三種領域常常會用 Flash :

其一是活動網站,活動網站的概念就是要讓人印象深刻與創造話題性,畫面有多炫就有多炫,互動性有多強就多強,最常見的線上活動網站功能,比如線上投票、答題抽獎、轉盤抽獎、連連看小遊戲、大家來找碴遊戲抽獎、刮刮樂抽獎、撲克牌遊戲、心理測驗...。常在上網的人,應該都有玩過海尼根的活動網站吧?

技術上來說,辦活動最怕的就是參賽者作弊,Flash 如果寫得好,是比較難作弊的,頂多用 tab 鍵來玩大家來找碴,或是用軟體監看 flash 執行時會傳輸或下載什麼資料,就算把 swf 檔抓下來反編譯,常常也不容易看出什麼東西。


但如果同樣的東西用 HTML5 或是 Java Script 來做,要作弊就方便了,有心人士可以看到所有的前端原始碼,用連 IE8 都有的開發者工具,修改一些按鈕的屬性或參數值,或是監看 Network 中有那些東西在傳輸,網站在本地端(如 cookie )存了什麼東西,甚至像上面那樣,直接在瀏覽器 console 下一些 js 指令來幫助遊戲進行,還可以用 Greasemonkey 製作自動腳本去跑。

以上是程式問題,另外還有視覺的問題,為了各種主流瀏覽器、各種裝置、各種解析度的相容性與版面呈現,HTML+CSS 有時候反而需要花更多時間調整,為了成本考量,有時候還是會用 Flash 來做。


其二是遊戲宣傳類網站,這種網站主打的通常是沉浸式體驗以及使人印象深刻,視覺與互動效果一樣是少不得的。一些常見的動態視覺特效,如 : 冒煙、螢火蟲、耶穌光、流動光、煙火、spotlight、頭髮飆、衣服飄、墨水灑落......,是 js, css3, webGL, canvas 跨瀏覽器較難達成的,如果真要做的話比較像在寫程式、算數學,與一般視覺設計師習慣 Flash 動畫所見即所得的設計流程相差甚遠。如暴風雪公司的很多遊戲宣傳網站還是用 Flash 去達成這些效果,不支援 Flash 的裝置就顯示一張靜態圖。或是用行動裝置也支援的影片格式來代替 Flash。

第三種還是常用 Flash 的,就是台灣的建設公司網站、建案宣傳網站。不過有些大間的已經開始在更新了,可喜可賀。

5.多媒體數位教材/遊戲類
以前是教育大學的學生(我讀的系不是師資培育的,別再問我為什麼沒當老師了),系主任常常會接到校內其他教育相關科系的數位教材製作需求,事實上同樣的錢拿去請業界做,通常比較快又比較好,會找學生來做的原因無非就是比較好凹,同樣的功能需求,要一些不食人間煙火的老教授,去找豺狼虎豹的業界公司談,可不知道要燒掉多少公帑。

數位教材的特點就是要做得活潑有趣,互動性要強,動畫跟視覺效果要引人入勝,而且學員不用升級瀏覽器跟作業系統,就可以看到各種精美的效果與一致的畫面,這些恰好都是 Flash 的強項。同樣的東西,如果要做成平板用的 app,甚至 iOS 跟 Android 各做一個,預算大概就要多出一兩位數。

不過事實上大多數的教材也都是因應短期的國科會計畫或是 OOXX 計畫而生,提報完後這些成果就封存起來了。我也離開學生時代已久,不知道現在的國高中課本後面還會不會附一片光碟,裡面會有一些無聊的課程內容可以看呢?

結論:
所以,從事多媒體設計行業,到底還要不要學 Flash 呢?
一種境界叫做把大便當黃金來賣,如果能用靜態的東西就讓老闆或客人買帳,那就不用學。
一種境界叫做無所不能,技術跟軟體一直在變,這都只是虛名,只有需求跟預算是真的。功能要完整,無非就是讓程式與 server 和 DB 連線的技術,跨平台的技術、超大型專案的技術、小東西快速結案的技術......。不管用什麼技術都能達到這些需求,你就是一個高強的技術勞工了。
一種境界叫做用嘴巴做東西,欲達此境界者,是不需要學習 Flash 這種勞工才需要會的東西的。Facebook 上那些常常講一些名言的世界偉人,有哪幾個是會 Flash 的?


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


從 WiMAX 看資訊界的選對邊站

WiMAX走向盡頭 投資成泡影

記者王憶紅/特稿
4G LTE(長期演進技術,Long Term Evolution)電信業者正在拚殺的此時,當年政府積極倡導的4G WiMAX(全球互通微波存取,Worldwide Interoperability for Microwave Access)產業卻可能逐漸走到盡頭。

業者昨至NCC抗議
WiMAX業者包括大同電信、威達雲端及全球移動等約200名員工,昨到NCC遞交陳情書,並在NCC大門前燒紙錢、獻菊花,上演一場WiMAX產業公祭抗議活動,少數業者、員工甚至因為沒有未來而落淚。
WiMAX產業可說是政府主導力推的政策產業,2005年先被政府納入M台灣計畫,預計到2009年的5年內,編列370億元預算,更在2007年釋出6張WiMAX電信執照。

不料,WiMAX主導者英特爾(Inter)2010年裁撤了負責推動全球WiMAX發展的專責單位,讓台灣一陣錯愕。之後,台灣網通廠商陸續停產,整個WiMAX產業政策也隨之曖昧不明,直到今年8月底NCC決議不予WiMAX業者大同電信換照,引發昨相關產業人員的抗議。

政府選錯邊 害了業者
WiMAX可說是政府首次推動的大型科技產業政策,但在選錯邊下,WiMAX業者所有投資成泡影。據了解,WiMAX業者威達董事長賴富源在WiMAX 7年來已經投資上百億元,但至今卻成一場空。
平心而論,WiMAX業者有錯,但也有冤。業者錯的是,當初參與執照競標,合約書上白紙黑字寫明,7成覆蓋率才能換照,但業者取得執照後的頭1、2年間,台灣供應鏈還算齊全時,卻未積極建設,不按照計畫採購,導致今日難以換照。
冤的是,當全球都不看好WiMAX前景時,政府還讓WiMAX業者抱有未來可望就地升級到LTE的一絲希望,沒有讓WiMAX投資立即止血。
WiMAX是當初政府大力推廣的產業,未能讓業者斷尾求生,歷經這個產業的2任總統、3任科技政委、4任NCC主委,是要給個交代的。

來源: http://news.ltn.com.tw/news/business/paper/810454

上面是近期的一則新聞,本來大家押寶在某個技術上,後來該技術卻停止發展了,當初的投資全部變成一場空。在(廣義的)資訊產業,常常發生這種情況。

想不起來嗎? 舉幾個例子來聽聽。

一.跟著大公司就對了?
2007 年時微軟發表 Sliverlight ,要來搶 Flash 的相關應用領域,一些使用全套微軟解決方案與開發工具的資訊公司,常常會被洗腦成「iPad 神馬的都是娛樂領域,在商用領域就是微軟最棒。」「有微軟的資源撐腰,做什麼都不用怕。」,有些人覺得投資這個技術是不錯的選擇,於是就有 Sliverlight 的 ERP 系統,或是其他應用程式。

結果 2015 年時,微軟呼籲Silverlight用戶改用其他技術 即將伴隨 Windows 10 出爐的微軟新瀏覽器 Edge 不再支援 Silverlight,微軟計畫在 2021 年完全終止對 Silverlight 的支援,雖然停止支援不代表不能用,就像現在還是一堆人在用 XP 一樣。但販售停止支援的商品,容易造成社會觀感不佳,一些本來就不看好 Sliverlight 、唱衰微軟的分析家就又可以拿來說嘴了。

所以選擇大公司經營的產品,就一定可以走得安穩長久嗎? 這可不一定喔!
Yahoo 不夠大嗎? 那無名小站怎麼會被停掉呢?
Google 不夠大嗎? Google Reader 現在跑哪去了呢?
WiMAX 主導廠商落跑,落跑的是誰? 是 Intel。

二.產品只要便宜、好用,大家就一定會選擇你?
便宜就贏了嗎? 這可不一定,舉一個影音界的例子。如果要在家看合法的高畫質電影,會想到什麼? 各種線上影音或隨選影音服務,或是去影片店租藍光(BD),去買藍光(BD)。

事實上在發展初期,還有另一個叫 HD-DVD 的東西,HD-DVD 的播放機跟空白片還比藍光便宜,但最後卻是 HD-DVD 消失了! 因為影片發行商,還有其他廠商,都不站在 HD-DVD 那邊,當然這背後的商業考量和利益糾葛一定一言難盡,比玫瑰瞳鈴眼還複雜,總之今天站著的是藍光,而不是 HD-DVD。

功夫兩個字,站著的才是對的。

好用就一定贏嗎? 這也不一定,舉台灣地區大家最愛用的通訊軟體 Line 為例,各種貸款廣告、遊戲邀請,愚蠢的備份與轉移機制,萬年不更新的 Line for iPad。如果你用 Android 平板,則無法跟手機共用帳號,Android 平板一登入,手機就會被登出清空,一輩子都將再也看不到你的對話紀錄。Line 除了貼圖多之外,根本難用。

想用其他更好用的即時通訊軟體? 想讓周遭的人改用其他通訊軟體? 您會遇到以下情況:

Skype? 沒有可愛貼圖? 而且都沒人在上面傳感恩圖片或好笑影音耶,好無聊。
PChome IM? Juiker? 沒聽過,蛤? 國產的喔! 不夠潮啦,都是阿宅在用。
Facebook Messenger? 不想給陌生人加 FB。
Beetalk? 新聞說那個是年輕人約炮用的耶?
Whats app, Cubie, M+ Messenger? 很好用? so what? 根本沒朋友在上面?
Wechat, QQ? 只有阿陸仔或是在大陸工作的人在用。

有的企業老闆似乎也是看穿這一點,產品不用做得好,但是一定要會宣傳。於是主力為資訊產品的公司,預算跟資源卻都在行銷、業務手上,造就一堆機海、App 海、電子垃圾。

三.有千千萬萬的鄉民來維護,開放原始碼軟體的壽命更長?
有一種「開放原始碼好棒棒」的觀點,大概是說商業軟體常常會碰到公司的商業考量,或是各種利益分配問題、產品線問題,讓本來應該可以很完美、世界無雙的軟體,變得各種閹割、各種死要錢、各種高額的雜項費用、各種 N 年後停止支援。

有人覺得開放原始碼的軟體,由網路上的大家來維護,殺了一個鄉民,還有千千萬萬的鄉民,而且都是公開的,沒有黑箱作業,而且很多都是免費的,不用擔心吞人的授權條款,也不用擔心收到 BSA 的信,或是用盜版被離職員工檢舉,或是抓破解抓到病毒。反正我只是要簡單的一套XXX(註一),所以沒必要用花錢的。

註一:我只是要一套簡單的XXX,同義詞:「這應該不難吧?」客戶字典經典三百句其中之一,如果這句話講出來,看到乙方爆青筋或是肌肉緊繃,表示乙方還是個菜鳥。

這個理論,常伴隨著每個世代的一個經典 Open Source 軟體來做印證,如十年前,用 osCommerce 網路開店,軟體免費,安裝方便,可商業使用,伺服器費用相對便宜,輕輕鬆鬆就可以達成網路開店的夢想。這年頭則是 Wordpress 正夯,部落格可以拿來作形象網站,還可以開店,滿街都是模板跟教學。

但是後來大家發現,開放原始碼的軟體還是有可能會沒人維護、被放生。或是使用開放原始碼的解決方案,初期建置成本很低,但是後續需要維護、功能更新,或是客製化調整的成本高得嚇人。

例如上個世代在中國有一套開源電商系統叫 ecshop,功能強大,一些中小型網頁公司號稱「自行開發的客製化購物車」,時至今日,基本上連 ecshop 一半的功能都沒有。但是 ecshop 後來卻因為程式久未更新,系統需求的 php 版本過低,很多規格太新的主機沒辦法裝,於是就有各種高手大大的修改版流傳在民間,想用可以,就祈禱該版本不要出現問題或安全漏洞。

而且有人在的地方就會起爭議,開放原始碼軟體的作者們、或是組織協會,一樣會因為各種原因鬧分家,就好像 LibreOffice vs. OpenOffice,MySQL vs. MariaDB。

有些人已經參透了免費的最貴的道理,該花的錢還是要花,還不如用一般商業軟體,有問題還可以拿起電話,直接打去詰譙廠商。而不是「三天前我已經寫 email 給他們了,等待他們回信...。」

四.百家爭鳴的 Framework 或 Library,每個都要學嗎?
在古時候,那時候世界上只有一個瀏覽器叫做 IE,使用其他的瀏覽器的人會被當成異類、資訊孤兒、阿宅。

但後來出現了各種讓開發人員 Write less, do more 的 Java Script framework 或 library,如 Prototype, Mootools, YUI, ExtJS。但是現在呢? YUI 已經停止維護了,最後活得最好的則是 jQuery,國中生都知道只要把元素用$()包起來就可以控制它,還不用擔心哪個瀏覽器不吃哪個原生 Java Script 語法,還有一堆使用 jQuery 為基礎製作的套件流~傳~在~民~間。

坊間電腦補習班的一堆課程名稱也都是 OOOO+jQuery+OOOO,所以 jQuery 超難,要學了才會用,其他的不用學就會用了嗎? 非也,是其他的技術不流行,沒人用。電腦補習班教的是市場上有需求要用的東西,而不是教大家不會的東西。

jQuery 會活著多久,沒人知道。那當初花費時間心力學其他技術的人,他們的怨念會不會變成怪物,整天讓大家的資訊產品當機呢? 搞不好會喲! 也許哪天就被畫到某個日本漫畫裡面了。

五.紅極一時的必需品,卻成為未來的垃圾
Flash 曾經紅極一時,一間網頁設計公司裡只有兩種人不會用 Flash,一個是商品上架小弟,一個是老闆。
Flash 讓 IE6~IE11 瀏覽器都可以看到一模一樣的東西,而且還有更高的權限去控制瀏覽器視窗的東西,不像現代瀏覽器綁手綁腳,幹什麼事都要先求得使用者按下同意按鈕。在當年,曾經要做一個網站,起手式就是先來個首頁動畫,進去之後再來個選單動畫,每個網頁公司都有一些珍藏的 XX 飛舞,相片撥放、選單特效、小遊戲的 Flash 素材庫。

但是行動裝置讓 Flash 的美好時代風雲變色,神教的教主公開抨擊 Flash,神壇內的產品也通通不支援 Flash,甚至 Flash 原本的主要舞台 - PC 桌面瀏覽器,後來也開始作一些預設不載入 Flash 的小手段,一代紅星逐漸變成人人喊打的過街老鼠,當年的一些 Flash 神人、大大也紛紛轉行到其他技術跑道。

除了 Flash,還有一些 NPAPI 或 ActiveX 做的玩意,一般人可能不太清楚這是什麼。但要是講線上金融交易、線上影音互動,web ATM 轉帳、選課、安全交易......處處可見這些技術的蹤跡,系統本來好好的,可能突然因為使用者更新了瀏覽器、或使用了其他裝置,而再也無法使用該系統。店家可以不去更新自己的產品,但就是等著被時代邊緣化,然後淘汰而已。

結論
十年磨一劍、深山修練的時代已經過去了,技術越來越值錢,但有時候也很不值錢。


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


播放吧! 網頁上的影片

近期遇到一個需求,客戶的行業會有自己的影片內容,想把影片放在自己的伺服器,在自己的網站上播放,而不是放在 Youtube 等線上影音服務平台,考察其他同性質的競爭業者,發現在網頁上播放自己的影片,這件事並不單純...

上面有一個 ppt,如果看不到 ppt 請點此連結

內容摘要:

第一部 : 我的上古時代
1.步驟1:把影片傳到伺服器,用早期的影片播放語法…
2.步驟2:電腦需要安裝各種 Player 才能看網頁上的影片… (您是否要執行此 ActiveX 控制項?)
3.步驟3:成功看到影片了!

4.< object> 屬性介紹:

5.以前的技術為何不能解決現代的問題?

  • ActiveX 在非 IE 的瀏覽器不支援
  • NPAPI 相關技術在現代瀏覽器被停用。
  • Codebase 插件路徑失連
  • Flash 人人喊打
  • Sliverlight – 微軟宣布將終止支援
  • 行動裝置時代來臨

第二部: 新時代
1.HTML5 Video 標籤

  • 使用 < video> 標籤與相關屬性,即可產生影片播放介面,不需要自己寫介面。
    影片播放器的功能細項:
    a.有一顆按鈕點一下會變成║,會停在剛剛的畫面,並且聲音暫停,再點一下會變成 ►,從剛剛的時間點繼續播放畫面與聲音。
    b.有一個矩形區塊,依目前已播放/影片總長度計算並顯示正確的長度,每秒更新,與 a 項功能連動。
    c.點擊 b 項區塊,會前往該位置對應的影格與音訊時間。
    族繁不及備載...

  • IE9(含)以上支援 < video> 標籤。

  • 由瀏覽器負責解碼影片,影片格式支援性依瀏覽器而定:

    • MP4 (除了IE8, Android 4.3-,支援性最高)
    • OGG (不支援 IE, Edge, Firefox3.5-, Chrome3-)
    • WebM (不支援 IE, Edge, Safari, Firefox4-, Chrome 6-)
    • m3u8 ( HLS 串流影音格式,Chrome 不支援)
    • 如果我有其餘的格式,如 FLV 可以直接用 video tag 來播嗎? 不,仍須仰賴外部套件(通常使用 Flash 做的播放器套件)。

2.HTML5 Video 標籤的相關屬性

  • autoplay - 是否自動撥放影片(行動裝置無效)
  • loop – 是否循環
  • poster – 影片故障/影片載入中/影片未撥放顯示一張圖片
  • preload – 是否預先下載,或是等按下 play 之後才開始下載
  • source – 影片路徑
  • controls - 影片控制條
    • Play/Pause 撥放/暫停按鈕
    • Seeking 撥放進度條
    • Volume 音量控制
    • Fullscreen 全螢幕按鈕
    • track (目前只有 Edge 跟 Safari 支援)

3.同一段 video 語法在各瀏覽器顯示的樣子都不一樣
4.為了達成瀏覽器相容性,Flash 不能亡
5.外部播放器套件

  • 使用 html5 video + Flash 播放器 + JS 等綜合技術,達成最高的瀏覽器覆蓋率
  • 各瀏覽器統一的播放器介面、可換面板、自訂樣式…
  • 方便的 API 與事件呼叫方式
  • 擴充套件,如各種樣式的播放清單、影片段落縮圖
  • 商業授權、持續更新
  • 額外的服務,如串流影音輸出,雲端伺服器串接
  • 商業授權: videojs, jwplayer, flowplayer
  • 免費授權可商用: Strobe Media Playback, Sewise Player

三、網頁與影片的相關技術重點
1.大家都能看到影片
2.串流影音技術 - HTTP Live Streaming(HLS),讓影片可以邊載入邊播放,
3.保護機制 - 限制影片只在在特定網站播放,或是播放給特定的人看
4.壓縮技術 - 使用者不喜歡等待,經營者不喜歡花錢在設備上
5.動態置入內容 - 動態置入廣告、動態廣告驗證碼
6.網頁互動 - Youtube Embed API,動作事件與影片互動

四、最簡單的方法 - 把影片放在線上影片平台
如隨意窩、Youtube、優酷、Vimeo, Facebook, Google Drive..
1.優點

  • 外部曝光/作者廣告收益
  • 串流處理
  • 持續的播放技術更新
  • 不須占用自己主機的傳輸流量
  • 平台提供簡易的剪輯工具

2.缺點

  • 廣告
  • 影片被檢舉、失效
  • 服務收攤 (ex: vlog, 無名小站,…)

五、把影片上傳到 Youtube 就結束了嗎?
1.嵌入影音時要選哪一種?
2.現有的網站編輯器,嵌入影片很不方便
3.理想的網站編輯器影片嵌入功能

  • 視覺化的選擇影片插入位置,不用切到原始碼模式
  • 可方便的重複編輯修改,不用在原始碼模式裡面找嵌入碼
  • 安全的刪除,不會把把包在附近的東西一起刪掉。
  • 乾淨的刪除,不會留下任何殘留的容器在畫面上。
  • 在編輯區中可正確顯示影片尺寸、位置與影片預覽,方便編排
  • 相容各大影音平台影片
  • 影音空間串接

4.理想編輯範例 - weeblywebnode


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助