HTML系列(七):多媒體

来源:http://www.cnblogs.com/csxiaoyu/archive/2016/03/06/5247929.html
-Advertisement-
Play Games

一、video標簽 H5新增了video實現線上播放視頻的功能: 代碼示例: 1 <video controls="controls"> 2 <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg"> 3 <sourc


一、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 表示元素到區域邊界的水平距離和垂直距離,值是正整數,單位是像素。
  onmouseover=this.stop() onmouseout=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>

 


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

-Advertisement-
Play Games
更多相關文章
  • 近日在群里看到有個題目,拿出來寫寫, 要求: 用html,css,原生js實現如圖的效果,先正向輸出,然後逆向回溯,最後停留在完整的畫面。 首先: HTML部分代碼: <div id="result"></div> 就是這麼簡單一行搞定。 CSS代碼: #result{ width:550px; m
  • [1]定義 [2]方法 [3]相容
  • 1.原型鏈繼承:構造函數、原型和實例的關係:每個構造函數都有一個原型對象,原型對象都包含一個指向構造函數的指針,而實例都包含一個指向原型對象的內部指針。確認原型和實例之間的關係用instanceof。 原型鏈繼承缺點:字面量重寫原型會中斷關係,使用引用類型的原型,並且子類型還無法給超類型傳遞參數 f
  • [1]定義 [2]觸發條件 [3]作用
  • 一、表單標簽form 表單標簽用於申明表單,定義採集數據的範圍,即<form>包含的數據將被提交到資料庫上,包含了處理表單數據所用CGI程式的URL以及數據提交到伺服器的方法。 表單能夠包含 input 元素,比如文本欄位、覆選框、單選框、提交按鈕等等。還可以包含 menus、textarea、fi
  • 一、基本表格: 表格標記<table>,行標記<tr>,單元格標記<td> 基本語法: <table> <tr> <td>單元格內文字</td> <td>單元格內文字</td> ...... </tr> <tr> <td>單元格內文字</td> <td>單元格內文字</td> ...... </tr
  • css3出現之前,我們實現一個對象的一組連續動畫需要通過JavaScript或Jquery編寫,腳本代碼較為複雜; 若需要實現傾斜、旋轉之類的動畫難度將更高(我還沒試過用JavaScript或Jquery如何實現),而且即使能實現估計花的時間代價及維護難度是很大的,很多時候只能依靠畫圖工具製作此類動
  • 最近工作比較忙,做不到每周兩篇了,周末趕著寫吧,上篇我針對一些方法進行了分析,今天繼續。 沒看過前兩篇的可以猛戳這裡: underscore.js源碼解析(一) underscore.js源碼解析(二) underscore.js源碼GitHub地址: https://github.com/jash
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...