Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
TML5 提供了播放音頻文件的標準。
互聯網上的音頻
直到現在,仍然不存在一項旨在網頁上播放音頻的標準。
今天,大多數音頻是通過插件(比如 Flash)來播放的。然而,并非所有瀏覽器都擁有同樣的插件。
HTML5 規定了在網頁上嵌入音頻元素的標準,即使用 <audio> 元素。
瀏覽器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素.
注意: Internet Explorer 8 及更早IE版本不支持 <audio> 元素.
HTML5 Audio - 如何工作
如需在 HTML5 中播放音頻,你需要使用以下代碼:
實例
<audiocontrols><sourcesrc="horse.ogg"type="audio/ogg"><sourcesrc="horse.mp3"type="audio/mpeg">您的瀏覽器不支持 audio 元素。</audio>
control 屬性供添加播放、暫停和音量控件。
在<audio> 與 </audio> 之間你需要插入瀏覽器不支持的<audio>元素的提示文本 。
<audio> 元素允許使用多個 <source> 元素. <source> 元素可以鏈接不同的音頻文件,瀏覽器將使用第一個支持的音頻文件
音頻格式及瀏覽器支持
目前, <audio>元素支持三種音頻格式文件: MP3, Wav, 和 Ogg:
瀏覽器 | MP3 | Wav | Ogg |
---|---|---|---|
Internet Explorer 9+ | YES | NO | NO |
Chrome 6+ | YES | YES | YES |
Firefox 3.6+ | YES | YES | YES |
Safari 5+ | YES | YES | NO |
Opera 10+ | YES | YES | YES |
音頻格式的MIME類型
Format | MIME-type |
---|---|
MP3 | audio/mpeg |
Ogg | audio/ogg |
Wav | audio/wav |
HTML5 Audio 標簽
標簽 | 描述 |
---|---|
<audio> | 定義了聲音內容 |
<source> | 規定了多媒體資源, 可以是多個,在 <video> 與 <audio>標簽中使用 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
篇介紹了前端入門——html 中如何使用圖片,今天講下如何使用視頻和音頻等多媒體元素,它們能讓你的網頁更加豐富,讀者相對于文字圖片更愿意觀看視頻和音頻或其它多媒體。在本教程中,您將了解到不同的多媒體格式,以及如何在您的網頁中使用它們。
是多種媒體的綜合,一般包括文本,聲音和圖像等多種媒體形式。在計算機系統中,多媒體指組合兩種或兩種以上媒體的一種人機交互式信息交流和傳播媒體。使用的媒體包括文字、圖片、照片、聲音、動畫和影片,以及程式所提供的互動功能。
在因特網上,您會經常發現嵌入網頁中的多媒體元素,現代瀏覽器已支持多種多媒體格式。
多媒體元素(比如視頻和音頻)存儲于媒體文件中。多媒體元素也擁有帶有不同擴展名字的文件格式,比如 .swf、.wmv、.mp3 以及 .mp4。具體有哪些格式可以參考 w3cshool 網站的介紹,https://www.w3cschool.cn/html5/html5-video.html ,https://www.w3cschool.cn/html5/html5-audio.html。
直到現在,網頁上仍然不存在一項顯示視頻的標準。今天,大多數視頻是通過插件(比如 Flash)來顯示的。然而,并非所有瀏覽器都擁有同樣的插件。HTML5 規定了一種通過 video 元素來包含視頻的標準方法。
語法如下:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持Video標簽。
</video>
<video> 元素提供了播放、暫停和音量控件來控制視頻。
同時 <video> 元素也提供了 width 和 height 屬性控制視頻的尺寸。如果設置的高度和寬度,所需的視頻空間會在頁面加載時保留。如果沒有設置這些屬性,瀏覽器不知道視頻的大小,瀏覽器就不能在加載時保留特定的空間,頁面就會根據原始視頻的大小而改變。
<video> 與 </video> 標簽之間插入的內容是提供給不支持 video 元素的瀏覽器顯示的。元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式。一個頁面可以使用多個<video> 標簽,<video> 元素支持三種視頻格式: MP4, WebM, 和 Ogg。
顯示效果:
和視頻一樣沒有統一的標準,各個瀏覽器都不一樣。HTML5 規定了在網頁上嵌入音頻元素的標準,即使用 <audio> 元素。通過使用HTML5中的audio功能,你可以實現與flash相同的功能,即回放、跳轉、緩沖等。
語法如下:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素。
</audio>
control 屬性供添加播放、暫停和音量控件。在<audio> 與 </audio> 之間你需要插入瀏覽器不支持的<audio>元素的提示文本 。允許使用多個 <source> 元素。<source> 元素可以鏈接不同的音頻文件,瀏覽器將使用第一個支持的音頻文件。目前, <audio>元素支持三種音頻格式文件: MP3, Wav, 和 Ogg。
顯示效果:
插件(Plug-in)是擴展瀏覽器標準功能的計算機程序,插件被設計用于許多不同的目的:
1、<object> 元素
<object> 元素定義 HTML 文檔中的嵌入式對象。
它旨在將插件(例如 Java applet、PDF 閱讀器和 Flash 播放器)嵌入網頁中,但也可以用于將 HTML 包含在 HTML 中。
如下:
插入一個網頁片段
<object width="100%" height="500px" data="snippet.html"></object>
或者插入一個圖片
<object data="audi.jpeg"></object>
播放一個視頻
<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mp4">
<param name="controller" value="true">
</object>
播放一個音頻
<object height="100" width="100" data="song.mp3"></object>
2、<embed> 元素
<embed> 元素也可定義了 HTML 文檔中的嵌入式對象。這是一個 HTML5 標簽,在 HTML4 中是非法的,但是所有瀏覽器中都有效。
插入一個flash文件
<embed width="400" height="50" src="bookmark.swf">
插入html片段
<embed width="100%" height="500px" src="snippet.html">
播放一個音頻
<embed height="100" width="100" src="song.mp3" />
插入一個圖片
<embed src="audi.jpeg">
注意:
大多數瀏覽器不再支持 Java 小程序和插件。
大多數現代瀏覽器關閉了對 Flash 的支持。
我們可以使用 <video> 和 <audio> 標簽來顯示視頻和音頻
如下視頻代碼,HTML 5 <video> 元素會嘗試播放以 mp4、ogg 或 webm 格式中的一種來播放視頻。如果均失敗,則回退到 <embed> 元素。
HTML 5 + <object> + <embed> 是最好的解決辦法。
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240" />
</object>
</video>
如下音頻代碼,HTML5 <audio> 元素會嘗試以 mp3 或 ogg 來播放音頻。如果失敗,代碼將回退嘗試 <embed> 元素。
HTML 5 + <embed> 是最好的解決辦法。
<audio controls="controls" height="100" width="100">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>
到此你以及了解了如何在網頁中使用視頻音頻及其它多媒體控件,趕快自己試試,祝你學習愉快。
參考文獻:https://www.w3school.com.cn/html/html_video.asp
上篇:前端入門——html 中如何使用圖片
下篇:前端入門——html 表格的使用
tml5中實現音頻的話可以用新增的屬性video,但是都會發現其自帶的控制進度條非常不好看,所有很多人都會自定義它們的控制進度條,今天就來做一下音頻控制進度條!
點擊播放后即可看到進度條的圓點在相對于的動起來
代碼
html結構:
css樣式:
javascript:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。