HTML 媒體(Media)與多媒體、視頻、聲音格式

来源:https://www.cnblogs.com/dhnblog/archive/2020/03/31/12608933.html
-Advertisement-
Play Games

一、HTML 媒體(Media) 1.1HTML 多媒體 Web 上的多媒體指的是音效、音樂、視頻和動畫。 現代網路瀏覽器已支持很多多媒體格式。 1.2什麼是多媒體? 多媒體來自多種不同的格式。它可以是您聽到或看到的任何內容,文字、圖片、音樂、音效、錄音、電影、動畫等等。 在網際網路上,您會經常發現嵌 ...


一、HTML 媒體(Media)

1.1HTML 多媒體

  • Web 上的多媒體指的是音效、音樂、視頻和動畫。
  • 現代網路瀏覽器已支持很多多媒體格式。

1.2什麼是多媒體?

  • 多媒體來自多種不同的格式。它可以是您聽到或看到的任何內容,文字、圖片、音樂、音效、錄音、電影、動畫等等。
  • 在網際網路上,您會經常發現嵌入網頁中的多媒體元素,現代瀏覽器已支持多種多媒體格式。

1.3瀏覽器支持

  • 第一款網際網路瀏覽器只支持文本,而且即使是對文本的支持也僅限於單一字體和單一顏色。隨後誕生了支持顏色、字體和文本樣式的瀏覽器,圖片支持也被加入。
  • 不同的瀏覽器以不同的方式處理對音效、動畫和視頻的支持。某些元素能夠以內聯的方式處理,而某些則需要額外的插件。

1.4多媒體格式

  • 格式 多媒體元素(比如視頻和音頻)存儲於媒體文件中。
  • 確定媒體類型的最常用的方法是查看文件擴展名。當瀏覽器得到文件擴展名 .htm 或 .html 時,它會假定該文件是 HTML 頁面。.xml 擴展名指示 XML 文件,而 .css 擴展名指示樣式表。圖片格式則通過 .gif 或 .jpg 來識別。

1.5視頻格式

  • MP4是互聯網推出新的視頻格式。
  • YouTube 推薦使用 MP4 。

  • Flash Players 支持 MP4
  • HTML5 支持 MP4。
最新的 HTML5 標準只支持 MP4, WebM, 和 Ogg 視頻格式。
格式文件描述
AVI .avi AVI (Audio Video Interleave) 格式是由微軟開發的。所有運行 Windows 的電腦都支持 AVI 格式。它是網際網路上很常見的格式,但非 Windows 電腦並不總是能夠播放。
WMV .wmv Windows Media 格式是由微軟開發的。Windows Media 在網際網路上很常見,但是如果未安裝額外的(免費)組件,就無法播放 Windows Media 電影。一些後期的 Windows Media 電影在所有非 Windows 電腦上都無法播放,因為沒有合適的播放器。
MPEG
  • .mpg
  • .mpeg
MPEG (Moving Pictures Expert Group) 格式是網際網路上最流行的格式。它是跨平臺的,得到了所有最流行的瀏覽器的支持。
QuickTime .mov QuickTime 格式是由蘋果公司開發的。QuickTime 是網際網路上常見的格式,但是 QuickTime 電影不能在沒有安裝額外的(免費)組件的 Windows 電腦上播放。
RealVideo
  • .rm
  • .ram
RealVideo 格式是由 Real Media 針對網際網路開發的。該格式允許低帶寬條件下(線上視頻、網路電視)的視頻流。由於是低帶寬優先的,質量常會降低。
Flash
  • .swf
  • .flv
Flash (Shockwave) 格式是由 Macromedia 開發的。Shockwave 格式需要額外的組件來播放。但是該組件會預裝到 Firefox 或 IE 之類的瀏覽器上。
Mpeg-4 .mp4 Mpeg-4 (with H.264 video compression) 是一種針對網際網路的新格式。事實上,YouTube 推薦使用 MP4。YouTube 接收多種格式,然後全部轉換為 .flv 或 .mp4 以供分發。越來越多的視頻發佈者轉到 MP4,將其作為 Flash 播放器和 HTML5 的網際網路共用格式。

 1.6聲音格式

MP3是一種音頻壓縮技術,其全稱是動態影像專家壓縮標準音頻層面3(Moving Picture Experts Group Audio Layer III),簡稱為MP3。它被設計用來大幅度地降低音頻數據量。如果你的站點是音樂類型的,你可以選擇mp3格式。

HTML5 的最新標準支持 MP3, WAV, 和 Ogg 音頻格式。
格式文件描述
MIDI
  • .mid
  • .midi

MIDI (Musical Instrument Digital Interface) 是一種針對電子音樂設備(比如合成器和音效卡)的格式。MIDI 文件不含有聲音,但包含可被電子產品(比如音效卡)播放的數字音樂指令。

點擊這裡播放 The Beatles

因為 MIDI 格式僅包含指令,所以 MIDI 文件極其小巧。上面的例子只有 23k 的大小,但卻能播放將近 5 分鐘。MIDI 得到了廣泛的平臺上的大量軟體的支持。大多數流行的網路瀏覽器都支持 MIDI。

RealAudio
  • .rm
  • .ram
RealAudio 格式是由 Real Media 針對網際網路開發的。該格式也支持視頻。該格式允許低帶寬條件下的音頻流(線上音樂、網路音樂)。由於是低帶寬優先的,質量常會降低。
Wave .wav Wave (waveform) 格式是由 IBM 和微軟開發的。所有運行 Windows 的電腦和所有網路瀏覽器(除了 Google Chrome)都支持它。
WMA .wma WMA 格式 (Windows Media Audio),質量優於 MP3,相容大多數播放器,除了 iPod。WMA 文件可作為連續的數據流來傳輸,這使它對於網路電臺或線上音樂很實用。
MP3
  • .mp3
  • .mpga
MP3 文件實際上是 MPEG 文件的聲音部分。MPEG 格式最初是由運動圖像專家組開發的。MP3 是其中最受歡迎的針對音樂的聲音格式。期待未來的軟體系統都支持它。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1、HTML元素 a、從開始標簽到結束標簽的所有代碼 b、開始(開放)標簽<p>、結束(閉合)標簽</p>、標簽內的東西:元素內容 c、<br/>空元素,換行的意思 d、用p標簽行之間間隔較大,用br標簽行之間間隔較小 e、HTML元素語法: (1)元素內容是開始標簽與結束標簽之間的內容 (2)空元 ...
  • 1、聲明<!DOCTYPE html> a、html有多個不同版本,只有完全明白頁面中使用確切的html版本,瀏覽器才能完全正確地顯示出html頁面。 b、沒有結束符,聲明當前是一個html5的版本 2、html基礎標簽 a、<html></html> 無論是頭還是身體,都要包含在html標簽中 b ...
  • 1、為什麼要學習html5 a、2010年出(十分年輕) b、跨平臺運行(花心=.=) c、硬體要求低(這是不可能的,H5時代,開幾個網頁都占幾g記憶體→.→) d、flash之外的選擇(flash要漸漸退出歷史舞臺T.T,曾經的4399) 2、軟硬體環境 a、硬體:正常電腦都可以(滑稽) b、系統: ...
  • 1 完整代碼下載 https://pan.baidu.com/s/1JJyVcP2KqXsd5G6eaYpgHQ 提取碼 3fzt (壓縮包名: 2020-3-24-demo.zip) 2 圖片展示 3 主要代碼 1 "use strict" 2 3 ;(function (){ 4 5 //是否支 ...
  • 一、這一節講解的是背景圖片開始的位置也是可以設置的: background-orgin:數值值; 這裡的屬性值就是開始的位置,可分為: padding-left(預設);content-box;border-box <style> *{ margin:0; padding;0; } ul li{ l ...
  • 指令是以數據去驅動DOM行為,簡化DOM操作。常用指令如下 v-text innertext,不能解析文本中的html標簽 v-html innerhtml,可解析文本中的html標簽 v-show 控制元素的顯示、隱藏 v-if、v-else-if、v-else 滿足條件才顯示對應的元素 v-fo ...
  • 接上篇 https://www.cnblogs.com/chenyingying0/p/12608666.html 為什麼導航不使用fixed定位: 首先解釋下,手機端的頭部導航和底部導航,位置一般都是固定不變的 但是我們這裡不使用固定定位fixed,因為它在手機端的相容性並不好 我們可以設置總容器 ...
  • vue是國人開發的一個js框架,國人用得比較多。 Vue等框架與jQuery的區別 jQuery基於dom操作 Vue框架以數據驅動、組件化開發為核心 下載vue.js 如果安裝了node,執行命令 npm install vue 下載vue.js,可在vue後面加上 @版本號 指定要下載的vue. ...
一周排行
    -Advertisement-
    Play Games
  • .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
  • 目錄前言PostgreSql安裝測試額外Nuget安裝Person.cs模擬運行Navicate連postgresql解決方案Garnet為什麼要選擇Garnet而不是RedisRedis不再開源Windows版的Redis是由微軟維護的Windows Redis版本老舊,後續可能不再更新Garne ...
  • C#TMS系統代碼-聯表報表學習 領導被裁了之後很快就有人上任了,幾乎是無縫銜接,很難讓我不想到這早就決定好了。我的職責沒有任何變化。感受下來這個系統封裝程度很高,我只要會調用方法就行。這個系統交付之後不會有太多問題,更多應該是做小需求,有大的開發任務應該也是第二期的事,嗯?怎麼感覺我變成運維了?而 ...
  • 我在隨筆《EAV模型(實體-屬性-值)的設計和低代碼的處理方案(1)》中介紹了一些基本的EAV模型設計知識和基於Winform場景下低代碼(或者說無代碼)的一些實現思路,在本篇隨筆中,我們來分析一下這種針對通用業務,且只需定義就能構建業務模塊存儲和界面的解決方案,其中的數據查詢處理的操作。 ...
  • 對某個遠程伺服器啟用和設置NTP服務(Windows系統) 打開註冊表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer 將 Enabled 的值設置為 1,這將啟用NTP伺服器功 ...
  • title: Django信號與擴展:深入理解與實踐 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 後端開發 tags: Django 信號 松耦合 觀察者 擴展 安全 性能 第一部分:Django信號基礎 Djan ...
  • 使用xadmin2遇到的問題&解決 環境配置: 使用的模塊版本: 關聯的包 Django 3.2.15 mysqlclient 2.2.4 xadmin 2.0.1 django-crispy-forms >= 1.6.0 django-import-export >= 0.5.1 django-r ...
  • 今天我打算整點兒不一樣的內容,通過之前學習的TransformerMap和LazyMap鏈,想搞點不一樣的,所以我關註了另外一條鏈DefaultedMap鏈,主要調用鏈為: 調用鏈詳細描述: ObjectInputStream.readObject() DefaultedMap.readObject ...
  • 後端應用級開發者該如何擁抱 AI GC?就是在這樣的一個大的浪潮下,我們的傳統的應用級開發者。我們該如何選擇職業或者是如何去快速轉型,跟上這樣的一個行業的一個浪潮? 0 AI金字塔模型 越往上它的整個難度就是職業機會也好,或者說是整個的這個運作也好,它的難度會越大,然後越往下機會就會越多,所以這是一 ...
  • @Autowired是Spring框架提供的註解,@Resource是Java EE 5規範提供的註解。 @Autowired預設按照類型自動裝配,而@Resource預設按照名稱自動裝配。 @Autowired支持@Qualifier註解來指定裝配哪一個具有相同類型的bean,而@Resourc... ...