那是我在夕陽下的奔跑：邊跑邊學習html5之audio與video

flybywind 發布于2019-08-01 17:31 / 2455人閱讀

摘要：尤其是喬布斯在年發布的一篇的文章。喬布斯在里面寫下了關于的一點看法，說明自己為什么不使用，談到關于的一些問題，比如開放性，安全性，對于設備續航的影響，不利于觸摸屏，等等。終于，于年月日，爸爸也放棄治療了，宣布將于年正式退休。

今天為大家分享一下html5中的視頻（video）與音頻（audio）。在進入主題之前我們先了解一下Flash與html5這兩種技術的時代背景與發展歷史。

1.前言

Flash被退休與html5的上位

Flash這項技術誕生于20多年前，曾被應用于98%的個人電腦上，是開發者最青睞的軟件之一，被用于開發游戲、視頻播放器和可在多個網絡瀏覽器上運行的應用。Falsh的前半生可以說是輝煌的，在Flash最為鼎盛的時期，來自Adobe的官方統計，全球有將近200萬的Flash開發者。

但它僅僅是滿足了人們的短期需求，它沒有預見移動設備革命的到來。業界現在普遍認為，Flash的下坡路是從和蘋果的決裂開始的。尤其是喬布斯在2010年發布的一篇《thoughts-on-flash》的文章。喬布斯在里面寫下了關于Flash的一點看法，說明自己為什么不使用Flash，談到關于Flash的一些問題，比如開放性，安全性，對于設備續航的影響，不利于觸摸屏，等等。自此之后，這種技術的熱度開始下降，HTML5等其他技術已經逐步取代了Flash。在現下最普及的網頁瀏覽器Chrome上，Flash的使用率急劇下降。據谷歌稱，2014年80%的桌面用戶每天使用Flash播放器，而目前只有17%。終于，于2017年7月25日，Adobe爸爸也放棄治療了，宣布flash將于2020年正式退休。

HTML5是HTML的最新版本，它擴大了可以嵌入在網頁中的多媒體元素的列表。HTML5支持可擴展矢量圖形（SVG）的多媒體特定標簽、動畫和使用CANVAS元素，級聯樣式表(CSS)和Java的音頻和視頻的交互性。HTML5無需第三方插件（例如插件和API），以便通過在文檔文本本身中嵌入代碼來運行內容。這解決了以前的迭代發現的兼容性問題，其中需要第三方插件或專有API來正確呈現HTML文檔。

作為現在可以支持Flash類技術的開源語言，HTML5已經成為Web開發的新首選。所謂長江后浪推前浪，一代更比一代浪。html5可以說是站在Flash這個巨人的肩膀上，Flash留給html5大量的遺產，尤其是很多HTML5相關的視頻和音頻項目在過去幾年的發展中大量的融合了Flash相關的媒體庫來提供更多的功能支持，當今大量的HTML5 Video Player都是從原來的Flash領域變換而來。這一切都是Flash技術帶給當今HTML5領域的財富。在擁抱新技術的同時，也感謝flash對互聯網帶來的深遠影響。

廢話不多說，下面一起進入正題。

2.audio與video

2.1 標簽
標簽主要包括

2.2 視頻容器
不論是音頻文件還是視頻文件，實際上都只是一個容器文件，這點類似于壓縮了一組文件的ZIP文件。視頻文件(視頻容器)包含了音頻軌道、視頻軌道和其他一些元數據。視頻播放的時候，音頻軌道和視頻軌道是綁定在一起的。元數據部分包含了該視頻的封面、標題、子標題、字幕等相關信息。主流的視頻容器支持的格式包括：.avi,.flv,.mp4,.ogv等。

2.3 編解碼器
音頻和視頻的編解碼器是一種算法，能夠對特定格式的音頻和視頻文件進行編碼和解碼，使其在瀏覽器中能夠快速的加載與解析。極大的減少了用戶的等待時間，提升了用戶體驗。常見的音頻編解碼器有AAC、MPEG-3、Ogg Vorbis，視頻編解碼器包括H.264、VP8、Ogg Theora。

2.4 媒體元素
video/audio標簽屬性包括：
autoplay：控制是否自動播放；
controls: 控制是否顯示播放控件；
loop : 媒體是否循環播放;
muted:規定視頻輸出應該被靜音;
preload:在頁面加載時進行加載，并預備播放;
src:要加載的資源文件。
其中video還有幾個特殊的標簽屬性
poster : 視頻播放前的預覽圖片；
width、height : 設置視頻的尺寸；
videoWidth、 videoHeight : 視頻的實際尺寸(只讀)。

2.5 js中的audio與video
（1）創建

var ov = document.createElment("video") // 直接new 一個對象，參數為src。
var oa = new Audio("http://www.baidu.com/test.mp3")

（2）獲取

與常規的dom節點獲取沒有區別。

（3）屬性和方法

（4）事件

2.6 瀏覽器的支持情況
從下表可以看出瀏覽器對媒體元素的支持情況。

audio
Firefox：支持 Ogg Vorbis和WAV 　　
Opera ：支持Ogg Vorbis和WAV 　　
Safari ：支持MP3，AAC格式，和MP4 　　
Chrome ：支持Ogg Vorbis，MP3，WAV，AAC和MP4 　　
Internet Explorer 9+ ：支持MP3，AAC格式，和MP4 　　
IOS ：支持MP3，AAC格式，和MP4
Android ：支持AAC和MP3
video
Firefox：支持Ogg Theora格式和WEBM
Opera：支持Ogg Theora格式和WEBM
Safari：支持MP4
Chrome：支持Ogg Theora格式，MP4和WEBM
Internet Explorer 9：支持MP4和WEBM(需要安裝插件)
IOS：支持MP4
Android：支持MP4和WEBM(Android 2.3版本以上)
為了最大程度支持所有上面提到的瀏覽器，建議開發者使用Ogg Vorbis和MP3這兩種音頻格式，使用WEBM和MP4作為視頻文件的格式并將資源加載在source標簽中。
例如：

與直接在視頻或音頻標簽中寫src相比，使用source標簽加載資源的好處是，當瀏覽器無法解析第一種視頻或音頻的格式時，將會解析第二種格式，可以加載多個source。

3.demo

介紹了那么多，最后分享我通過媒體元素的一些屬性和方法做的一個自定義多媒體播放器，代碼地址：自定義彬彬播放器，代碼地址：自定義播放器源碼。

-----------------------------------------我是分割線君-----------------------------------------------

最后，擎創公司官網已經上線，小伙伴們請有興趣的可以看看。官網地址：www.eoitek.com

GPU云服務器云服務器那是我 html5的audio webrtc html5 video html5的video

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51192.html

那是我在夕陽下的奔跑：邊跑邊學習html5之audio與video

摘要：尤其是喬布斯在年發布的一篇的文章。喬布斯在里面寫下了關于的一點看法，說明自己為什么不使用，談到關于的一些問題，比如開放性，安全性，對于設備續航的影響，不利于觸摸屏，等等。終于，于年月日，爸爸也放棄治療了，宣布將于年正式退休。今天為大家分享一下html5中的視頻（video）與音頻（audio）。在進入主題之前我們先了解一下Flash與html5這兩種技術的時代背景與發展歷史。 1.前...

gself 2019-08-20 19:04 評論0 收藏0
那是我在夕陽下的奔跑：邊跑邊學習html5之audio與video

摘要：尤其是喬布斯在年發布的一篇的文章。喬布斯在里面寫下了關于的一點看法，說明自己為什么不使用，談到關于的一些問題，比如開放性，安全性，對于設備續航的影響，不利于觸摸屏，等等。終于，于年月日，爸爸也放棄治療了，宣布將于年正式退休。今天為大家分享一下html5中的視頻（video）與音頻（audio）。在進入主題之前我們先了解一下Flash與html5這兩種技術的時代背景與發展歷史。 1.前...

LiuZh 2019-08-29 13:17 評論0 收藏0
那是我夕陽下的奔跑-思否

摘要：不知道標題如何取，正好看到默認的，那就開始第一次奔跑搬磚三年，會偶爾寫寫博客來記錄一下學習的歷程。不知道標題如何取，正好看到默認的，那就開始第一次奔跑搬磚三年，會偶爾寫寫博客來記錄一下學習的歷程。之前在博客園(上學期間)和CSDN都有寫過,也有一段時間自己搭建，但是隨著博客園頁面越看越難受和CSDN的廣告越來越多，以及考慮搭建服務器的成本，最后選擇轉移到思否上繼續進行日常生活，學...

Bamboy 2019-07-01 12:41 評論0 收藏0
夕陽下, 那是我在奔跑——單件模式

摘要：急切的創建對象餓漢式以上爲餓漢式單列設計，該設計是線程安全的，即不同的線程在調用時返回的是統一對象，在加載這個類時，馬上創建了這個類的唯一單列實列。單件模式(JAVA實現) 定義單件模式：確保一個類只有一個實列，並提供一個全局訪問點單件模式和全局變量的區別若將對象賦值給一個全局變量，則該對象需在程序開始時就創建好，而改對象可能不會使用，造成資源浪費，而單件模式支持...

lieeps 2019-08-14 15:50 評論0 收藏0