詳解HTML5新增的多媒體標籤-H5教程-PHP中文網

詳解HTML5新增的多媒體標籤

藏色散人

發布： 2022-08-05 16:10:50

轉載

3360 人瀏覽過

這篇文章介紹HTML常用的多媒體標籤及HTML5新增的多媒體標籤，希望對需要的朋友有幫助！

HTML5新增的多媒體標籤

#一：影片<video>

目前<video>元素支援三種影片格式：盡量使用MP4格式

##MP4WebMOggIE#YESNOChromeFirefoxSafari

#瀏覽器
		##NO
YES	YES	#YES
YES從Firefox21版本開始Linux系統從Firefox 30開始	YES	#YES
YES

# NOYES 從Opera25版本開始YES影片<video>——常見屬性值autoplaycontrolswidth heightloop#src

NO		Opera
YES		# <video controls="controls" autoplay="autoplay" muted="muted" width="500px" height="400px" loop="loop" poster="images/tudou.jpg" preload="none"> <source src="medio/mov_bbb.mp4"> <source src="medio/mov_bbb.ogg"> 您的浏览器暂不支持<video>标签播放视频</video> 登入後複製
		屬性
描述
#autoplay	影片就緒自動播放（Google瀏覽器需新增muted來解決自動播放問題）
controls	向使用者顯示播放控制項
pixels（像素）	設定播放器寬度
pixels（像素）	播放器高度
loop

url

視訊url位址

posterimageurl靜音播放

#瀏覽器MP3WavOggIE 9 YESNO#NO

載入等待的話面圖片		muted	muted
	#二：音訊

Chrome 6 YESYESYES#Firefox 3.6 YESYES# YESSafari 5 YES#YESNOOpera 10 YESYESYES#

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>HTML5音频标签</title></head><body>
   <audio controls="controls" autoplay="autoplay" muted="muted" loop="loop">
   <source src="medio/music.mp3" type="audio/mpeg">
   您的浏览器不支持audio元素</audio>
   </body>
   </html>

登入後複製

屬性值描述





		Google瀏覽器把音訊和視訊自動播放禁止了

autoplay

自動播放
controls
controls
向使用者顯示播放控制項

loop

###loop######循環播放#############src######url######影片url位址############muted######muted######靜音播放##################多媒體標籤總結# ###########音訊標籤和視訊標籤使用方式基本上一致######瀏覽器支援情況不同######Google瀏覽器把音訊和視訊自動播放禁止了## ####我們可以為視頻標籤加muted屬性來靜音播放視頻，音頻不可以（可以通過JavaScript來解決）######視頻標籤是重點，我們經常設置自動播放，不適用conrols控件，循環和設定大小屬性#########【相關推薦：###css影片教學###】####

以上是詳解HTML5新增的多媒體標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！