[html5 原生] 在網頁中放置 mp4 影片撥放 (不使用Adobe Flash)


HTML5嵌入視頻轉換

最新一代的主流互聯網瀏覽器(例如sifar/ chrome/ edge/firefox ...等)都支持原生HTML 5視頻播放,而不需要像Adobe Flash這樣的第三方插件。

要在頁面中嵌入視頻,請使用以下HTML代碼:
我們所做的是使用<video>標籤來指定視頻的尺寸,並表示我們要使用瀏覽器的默認控件。然後在視頻標籤中,我們添加了兩個鏈接到我們的視頻文件的元素。
<video width="320" height="240" controls="controls" autoplay="autoplay" poster="影片位置.jpg">
  <source src="影片位置.mp4" type="video/mp4" />
  <source src="影片位置.webm" type="video/webm" />
  <source src="影片位置.ogv" type="video/ogg" />
   瀏覽器不支援。Video not playing? Download file instead.
</video>


視頻轉換為HTML5兼容的視頻文件後,網頁設計時就可以將其嵌入到您的網頁中。不過要注意的是不同的瀏覽器支持不同的視頻編解碼器。目前,Ogg Theora,H.264和 WEBM/VP8 被瀏覽器廠商使用,包括Internet Explorer(IE),Moziila Firefox,Google Chrome,Apple Safari和 Opera 等不同的html 5 <video>標籤。
 
  Video Formats
Browsers Ogg Theora H.264 WebM/VP8
IE 7/8 No <video> support No <video> support No <video> support
IE 9 Not Supported Supported Supported only if user installs WebM for IE9
Chrome Supported Not Supported Supported
Firefox Supported Not Supported Supported
Safari Not Supported Supported Not Supported
Opera Supported Not Supported Supported

因此,如果希望台灣金站網站訪問者可以在上面提到的所有瀏覽器(忽略IE 7/8)上正常瀏覽視頻,我們建議將媒體編碼為所有HTML 5兼容的視頻,分別為H.264,Ogg Theora和WebM / VP8 。

擴展名:.mp4 
類型:video / mp4 
擴展名:.webm 
類型:video / webm 
擴展名:.ogv 
類型:video / ogg

任何視頻轉換器支持所有三種HTML 5兼容視頻格式。打開任何視頻轉換器,在輸出配置文件列表中選擇HTML5嵌入視頻,然後將您的視頻文件轉換為H.264(*.mp4),WebM(*.webm)和OGV(*.ogv)。單擊輸出文件夾按鈕獲取輸出視頻。

 

瀏覽器支持的和視頻格式

[IE瀏覽器]
IE 9 +:HTML5 MP4或WebM
IE舊版本:使用MP4的Flash後備版

[FireFox Explorer]
Firefox 4 +:HTML5 WebM或OGG
Firefox 3.5 +:HTML5 OGG
Firefox舊版本+:使用MP4的Flash後備版

[Chrome瀏覽器]
Chrome 6+:HTML5 WebM或OGG
Chrome 3+:HTML5 OGG
Chrome舊版本:使用MP4的Flash後備版

[Opera Explorer]
Opera 10.60+:HTML5 WebM或OGG
Opera 10.50+:HTML5 OGG
Opera舊版本:Flash後備版與MP4

[Safari Explorer]
Safari 4+:HTML5 MP4
Safari舊版本:使用MP4的Flash後備版


 

HTML5視頻轉換器的多種支持格式和設備

支持的輸入格式: 3g2, 3gp, 3gpp, 3gp2, amv, asf, avi, avs, dat, divx, dv, dvr-ms, f4v, flv, m1v, m2p, m2t, m2ts, m2v, m4v, mkv, mod, mov, mp4, mpe, mpeg, mpeg2, mpeg4, mpg, mpv, mts, nsv, ogg, ogm, ogv, qt, rm, rmvb, tod, trp, tp, ts, vob, vro, wmv, webm

將AVI轉換為HTML5視頻 •將WMV轉換為HTML5視頻
•將MKV轉換為HTML5視頻 •將MPEG4轉換為HTML5視頻
•將MPEG-I轉換為HTML5視頻 •將MPEG-II轉換為HTML5視頻
•將FLV轉換為HTML5視頻 •將SWF轉換為HTML5視頻
•將3GP轉換為HTML5視頻 •將3G2轉換為HTML5視頻
•將MTS轉換為HTML5視頻 •將M2TS轉換為HTML5視頻
•將ASF轉換為HTML5視頻 •將DVR轉換為HTML5視頻
•將RMVB轉換為HTML5視頻 •將RM轉換為HTML5視頻
•將TOD轉換為HTML5視頻 •將AVS轉換為HTML5視頻
•將MPG轉換為HTML5視頻 •將TS轉換為HTML5視頻
•將DivX轉換為HTML5視頻 •將Xvid轉換為HTML5視頻
•將DV轉換為HTML5視頻 •將OGM轉換為HTML5視頻

支持的輸出格式: wmv,mpg,mp4,avi,asf,m2ts,3gp,3g2,flv,mkv,swf,webm,ogv,mp3,ogg,wav,aac,m4a,wma

•將HTML5轉換為AVI視頻 •將HTML5轉換為MP3視頻
•將HTML5轉換為MKV視頻 •將HTML5轉換為MPEG4視頻
•將HTML5轉換為MPEG-I視頻 •將HTML5轉換為MPEG-II視頻
•將HTML5轉換為FLV視頻 •將HTML5轉換為SWF視頻
•將HTML5轉換為3GP視頻 •將HTML5轉換為3G2視頻
•將HTML5轉換為ASF視頻 •將HTML5轉換為M2TS視頻
•將ASF轉換為HTML5視頻 •將HTML5轉換為MP3音頻
•將HTML5轉換為AAC音頻 •將HTML5轉換為OGG音頻
•將HTML5轉換為WAV音頻 •將HTML5轉換為WMA音頻
•將HTML5轉換為M4A音頻 •將HTML5轉換為iPod視頻
•將HTML5轉換為iPad視頻 •將HTML5轉換為iPhone視頻
•將HTML5轉換為Apple TV視頻 •將HTML5轉換為PSP視頻
•將HTML5轉換為Zune視頻 •將HTML5轉換為Google Android視頻

支持的輸出設備: iPod,iPad,iPhone,PSP,Zune,PSP,Archos,任天堂Wii,Google Android,BlackBerry,Windows Mobile,Creative Zen,Xbox等許多便攜式媒體播放器。
 

關於HTML5 Video

HTML5視頻是HTML5草案規範中介紹的一個元素,用於播放視頻或電影,部分替換對像元素。高性能HTML5視頻轉換器

Adobe Flash Player廣泛用於在YouTube等網站上嵌入視頻內容。Flash Player可用作大多數網絡瀏覽器(如Mozilla Firefox,SeaMonkey,Opera和Safari)的最新版本的插件,例如Apple iPhone和iPad上的瀏覽器以及Android 2.1或更低版本)。Google Chrome不再需要該插件,因為Google將播放器集成到瀏覽器中。HTML5視頻由其創作者打算成為在線顯示視頻的新標準方式[需要引用],但由於缺乏視頻標籤中應支持哪些視頻格式的協議,這一點受到阻礙。



 

回上一頁

相關文章:

喜歡這篇文章嗎?立即分享

Posted : / Views: 2982
Last updated :2017-06-27