目錄
进度条" >两种进度条
process
meter
总结
首頁 web前端 H5教程 HTML5--多媒體標籤詳解

HTML5--多媒體標籤詳解

May 08, 2017 pm 01:46 PM

早期的因特網主要用來分享學術成就,但是對普通民眾而言,更願意在上面分享一些更有趣的內容,比如視頻,音頻 ,這些技術在<a href="http://www.php.cn/wiki/1118.html" target="_blank">html5</a>之前都不是由<a href="http://www.php.cn/code/5011.html" target="_blank">html標籤</a>提供的

##網頁影音解決方案發展

雖然早期的

html並沒有提供支持視訊或音訊播放的標籤,但是這並不影響人們分享的慾望

  • #支援方式1:

    • 使用

      embed直接將影片塞入頁面,然後就可以使用Windows Media Player,Apple QuickTime或其實的影片播放器來建立播放視窗

    • 但這種方式對於影片本身不可控,相容性問題也無法顧及

  • 支援方式2

    • 使用瀏覽器外掛程式,一個是微軟的

      Silverlight,還有使用最普遍的Adobe Flash

    • Flash不但完全解決了瀏覽器支援問題,而且裝機率之高讓人咋舌(基本上99%的電腦都安裝了Flash播放器)

    • 使用

      Flash播放影片除了要學習Flash這項技術本身以外,更關鍵的是在iPhone,ipad並不支援這項技術

    • 如果想要查看影片的播放方式,將滑鼠移到影片視窗,右鍵如果可以看到

      Flash等文字,那麼該網站使用的就是Flash外掛

  • 多媒體標籤:

    • #Html5為了解決使用Flash 的各種問題推出了多媒體標籤

    • 由於影片格式問題,不同的瀏覽器對於相同格式的影片支援不同,需要準備多份影片

    • 無法對播放的影片提供很好的保護效果,因為使用者可以直接對影片檔案另存為

  • 總結:

    • 雖然

      html5中的多媒體標籤有各種不好,但我們還是需要擁抱這項新的技術,因為他的用法,真的十分簡單

audio標籤

w3c中對於audio的說明是這樣的audio標籤

  • 範例程式碼1:

    • 下面示範一種最簡單的使用方式

    • src:音訊的位址

    • #controls:音訊播放

      控制器

    • autoplay:自動播放

    • loop:

      循環

    • ##poster :指定影片不播放時顯示的封面
    • <audio src="song.ogg" controls="controls" autoplay loop>
      </audio>
      登入後複製
  • #範例程式碼2:

    • src:音訊的位址
    • 由於音訊格式在不同瀏覽器中支援情況不同,考慮相容性問題,我們需要使用下述程式碼
    • source:指定多個音訊,如果找到了目前瀏覽器支援的,那麼會直接使用,如果所有的
    • source

      標籤格式都不支援,會顯示最後的文本內容

    • <audio controls="controls">
        <source src="song.ogg" type="audio/ogg">
        <source src="song.mp3" type="audio/mpeg">
      你的浏览器不支持此种格式
      </audio>
      登入後複製
    Video標籤

#Video

標籤用來播放影片,用法跟#audio標籤十分類似

  • 範例程式碼1:

    • src:影片位址
    • controls:控制器
    • autoplay:自動播放
    • loop:循環
    • width

      :寬度

    • #height

      :高度

      ##
      <video src="movie.ogg" controls autoplay loop width = "200px" height = "200px">
      </video>
      登入後複製
    範例程式碼2:
    • #src:
    • 影片的位址

      #由於影片在不同瀏覽器中支援情況不同,考慮相容性問題,我們需要使用下述程式碼
    • source:指定多个视频,如果找到了当前浏览器支持的,那么会直接使用,如果所有的source标签格式都不支持,会显示最后的文本内容

<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
你的浏览器不支持video标签
</video>
登入後複製

两种进度条

在html5之前如果我们想要使用进度条,可以通过一些前端框架,或者自己使用控件搭建出类似的外观,但是在html5中推出了两个进度条控件,接下来就让我们来看看如何使用它们

process

  • 外观

    • 如果只是定义该元素<progress><progress/>不设置任何内容,显示效果如下图

HTML5--多媒體標籤詳解

progress.gif

  • 作用:

    • 用来显示任务的进度(进程)

    • 如果想要用来显示度量值(比如容量使用情况)请使用meter标签

  • 属性:

    • max: 总工作量

    • value: 已完成工作量

  • 兼容性:

    • 为了保证显示效果,可以再progress标签中写入内容,在当前浏览器无法显示该控件时,会转而显示内容

meter

  • 外观:

    • 通过属性值的搭配能够显示出多重不同的变化

  • 常见属性:

    • high:规定较高的值

    • low:规定较低的值

    • max:规定最大值(可以超过,但是进度条已经满了)

    • min:规定最小值

    • value:规定度量的值

  • 示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<meter class="class1" high="80" low="30" max="100" min="10" value="21" ></meter>
<br/>
<meter class="class2" high="80" low="30" max="100" min="10" value="60"></meter>
<br/>
<meter class="class3" high="80" low="30" max="100" min="10" value="90" ></meter>
<br/>
<meter class="class4" high="80" low="30" max="100" min="10" value="100" optimum="10" ></meter>
<br/>
</body>
</html>
登入後複製
  • 显示效果即截图

HTML5--多媒體標籤詳解

meter.png

总结

两种进度条都能够用来显示进度,由于兼容性以及语义性的问题,在实际开发中需要结合实际情况决定是否使用它们(或者是使用对应的前端框架)。

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

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

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

See all articles