一、video標簽

???? H5新增了video實現在線播放視頻的功能：

???? 代碼示例：

1 <video controls="controls"> 2 <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg"> 3 <source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4"> 4 你的瀏覽器不支持Video標簽 5 </video>

???? src可以寫在video標簽里，也可以寫在source標簽里，<source> 標簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源。<source> 標簽允許您規定可替換的視頻/音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。

???? 在video中加一句提示，這句話在支持video的瀏覽器中不會顯示，如果不支持就會顯示給用戶。下面是sourse標簽的屬性：

???? 如果瀏覽器不支持video，但也想繼續顯示視頻，可以用傳統的flash來替換提示的“你的瀏覽器不支持video標簽”。直接按照原來正常的flash方法寫進video標簽即可（flash方法下面有）。

???? 提示：video和source標簽是H5的新標簽，IE 8 以及更早的版本不支持他們。

???? 此外，H5 media提供了在舊版IE瀏覽器中全面兼容的JS類庫，只需要在head頭部復制以下一段代碼即可：

<script src="http://HTML 5 media.googlecode.com/svn/trunk/src/HTML 5 media.min.js"></script>

???? H5 media是一個JS類庫，它不依賴于任何JS框架，使用H5 media后當瀏覽器不支持H5時，他會自動切換成flash模式的flowplayer播放器。

?

二、多媒體文件embed

???? HTML5中新增的標簽，可以在頁面中嵌入任何類型的文檔。用戶的機器上必須已經安裝了能夠正確顯示文檔內容的程序，一般常用于在網頁中插入多媒體格式可以是。rm .mid .wav等。

???? 還可以通過autostart屬性設置音頻或視頻文件是否在下載完之后自動播放（true:自動播放；false:不自動播放）；通過loop屬性設定視頻音頻循環次數。此外還可以設置面板顯示、開始時間、音量、容器屬性、外觀設置、說明文字、前景色和背景色、對齊方式等屬性。

???? 提示：<embed> 標簽必須有 src 屬性。

???? 和object的區別：兩者都是用來播放多媒體文件的對象，object元素用于IE瀏覽器，embed元素用于非IE瀏覽器，為了保證兼容性，通常我們同時使用兩個元素，瀏覽器會自動忽略它不支持的標簽。同時使用兩個元素時，應該把<embed>標簽放在<object>標簽的內部。

?

三、object標簽

???? 向 HTML 代碼添加一個對象：

1 <object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" 2 width="100" height="50"> 3 <param name="BorderStyle" value="1" /> 4 <param name="MousePointer" value="0" /> 5 <param name="Enabled" value="1" /> 6 <param name="Min" value="0" /> 7 <param name="Max" value="10" /> 8 </object>

???? 定義一個嵌入的對象。使用此元素向您的 XHTML 頁面添加多媒體。此元素允許規定插入 HTML 文檔中的對象的數據和參數，以及可用來顯示和操作數據的代碼。

???? <object> 標簽用于包含對象，比如圖像、音頻、視頻、Java applets、ActiveX、PDF 以及 Flash。object 的初衷是取代 img 和 applet 元素。不過由于漏洞以及缺乏瀏覽器支持，這一點并未實現。瀏覽器的對象支持有賴于對象類型。不幸的是，主流瀏覽器都使用不同的代碼來加載相同的對象類型。而幸運的是，object 對象提供了解決方案。如果未顯示 object 元素，就會執行位于 <object> 和 </object> 之間的代碼。通過這種方式，我們能夠嵌套多個 object 元素（每個對應一個瀏覽器）。

???? 提示：<param> 標簽定義用于對象的 run-time 設置。不要對圖像使用 <object> 標簽，請使用 <img> 標簽代替。

???? param 元素允許您為插入 XHTML 文檔的對象規定 run-time 設置，也就是說，此標簽可為包含它的 <object> 或者 <applet> 標簽提供參數。

???? 示例代碼：

1 <object width="468" height="287" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> 2 <param name="movie" value="http://www.w3school.com.cn/i/helloworld.swf"/> 3 <param name="quality" value="high"/> 4 <param name="wmode"value="transparent"/> 5 <embed width="468" height="287" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" wmode="transparent" src="http://www.w3school.com.cn/i/helloworld.swf"/> 6 </object>

?

四、嵌入flash代碼

???? 嵌入flash典型代碼使用object和embed標簽嵌入：

1 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="100%" height="100%" id="myfile" align="middle"> 2 <param name="allowScriptAccess" value="sameDomain"/> 3 <param name="movie" value="myfile.swf"/> 4 <param name="quality" value="high"/> 5 <param name="scale" value="noscale"/> 6 <param name="bgcolor" value="#ffffff"/> 7 <embed src="http://www.webjx.com/upfiles/20050415/myfile.swf" quality="high" scale="noscale" bgcolor="#ffffff" width="100%" height="100%" name="myfile" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/> 8 </object>

???? 可以加上allowfullscreen屬性并設置為true即可實現全屏播放。

?

五、滾動文字marquee

1 <marquee style="width: 388px; height: 200px" scrollamount="2" direction="up"> 2 <p><span>日不落的夏天中了50元酒店信用住超值紅包</span></p> 3 <p><span>悠悠youyou中了20元酒店信用住超值紅包</span></p> 4 <p><span>xiaomogu中了100元酒店信用住超值紅包</span></p> 5 </marquee>

???? 語法：<marquee>...</marquee>； 說明：在標記之間添加要進行滾動的內容。

重要屬性：

???? direction 表示滾動的方向，值可以是left，right，up，down，默認為left
　　behavior 表示滾動的方式，值可以是scroll（連續滾動）slide（滑動一次）alternate（來回滾動）
　　loop 表示循環的次數，值是正整數，默認為無限循環
　　scrollamount 表示運動速度，值是正整數，默認為6
　　scrolldelay 表示停頓時間，值是正整數，默認為0，單位是毫秒
　　align 表示元素的垂直對齊方式，值可以是top，middle，bottom，默認為middle
　　bgcolor 表示運動區域的背景色，值是16進制的RGB顏色，默認為白色
　　height、width 表示運動區域的高度和寬度，值是正整數（單位是像素）或百分數，默認width=100% height為標簽內元素的高度。
　　hspace、vspace 表示元素到區域邊界的水平距離和垂直距離，值是正整數，單位是像素。
　　οnmοuseοver=this.stop() οnmοuseοut=this.start() 表示當鼠標以上區域的時候滾動停止，當鼠標移開的時候又繼續滾動。
提示：
　　marquee 元素的默認寬度與其父元素的寬度相等。如果marquee 位于沒有指定寬度的 TD 內，你就需要明確設置marquee的寬度。如果 marquee和 TD 的寬度都沒有指定，那么滾動字幕就將限定于 1 個像素寬。
　　要創建垂直滾動的字幕，請將其 scrollLeft 屬性設定為 0。要創建水平滾動的字幕，請將其 scrollTop 屬性設定為 0，這將覆蓋任何腳本設置。
　　scrollLeft 和 scrollTop 屬性當字幕滾動時為只讀。當不處于滾動狀態時，scrollLeft 對于設置為水平滾動的字幕來說為可讀寫，scrollTop 對于設置為垂直滾動的字幕來說為可讀寫。
　　此元素在 Microsoft? Internet Explorer 3.0 的 HTML 中可用，在 Internet Explorer 4.0 的腳本中可用。
　　此元素是塊元素。

六、媒介外部文本軌道track

???? <track> 標簽為諸如 video 元素之類的媒介規定外部文本軌道。

???? 用于規定字幕文件或其他包含文本的文件，當媒介播放時，這些文件是可見的。是H5的新標簽，目前所有主流瀏覽器都不支持 <track> 標簽。

???? 帶有字幕的視頻：

1 <video width="320" height="240" controls="controls"> 2 <source src="forrest_gump.mp4" type="video/mp4" /> 3 <source src="forrest_gump.ogg" type="video/ogg" /> 4 <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese"> 5 <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English"> 6 </video>

?

轉載于:https://www.cnblogs.com/csxiaoyu/p/5247929.html

總結

以上是生活随笔為你收集整理的HTML系列（七）：多媒体的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。