HTML5 – ausführliche Erläuterung der Multimedia-Tags

Das frühe Internet wurde hauptsächlich zum Teilen akademischer Ergebnisse genutzt, aber normale Menschen waren eher bereit, einige interessantere Inhalte darauf zu teilen, wie zum Beispiel 视频, 音频, diese Technologien gab es schon früher <a href="//m.sbmmt.com/wiki/1118.html" target="_blank">html5</a>Keines davon wird von <a href="//m.sbmmt.com/code/5011.html" target="_blank">html标签</a>

Entwicklung von Web-Audio- und Videolösungen bereitgestellt

Obwohl die frühen html keine Tags zur Unterstützung von Video oder bereitgestellt haben Audiowiedergabe, Dies hat keinen Einfluss auf den Wunsch der Menschen, etwas zu teilen

• Unterstützungsmethode 1:

• Verwenden Sie embed. Fügen Sie das Video direkt in die Seite ein. Anschließend können Sie Windows Media Player, Apple QuickTime oder einen tatsächlichen Videoplayer verwenden, um ein Wiedergabefenster zu erstellen

• , aber dieses Methode ist für das Video selbst nicht geeignet. Steuerung, Kompatibilitätsprobleme können nicht berücksichtigt werden

• Unterstützungsmethode 2

• Verwenden Sie ein Browser-Plug-in, eines davon ist das von Microsoft Silverlight, und das am häufigsten verwendete Adobe Flash

• Flash löst nicht nur die Browserunterstützung vollständig Problem, hat aber auch eine erstaunlich hohe Installationsrate. Wow (grundsätzlich ist auf 99 % der Computer der Flash Player installiert)

• Zusätzlich zum Erlernen der Technologie selbst bei der Verwendung von Flash zum Abspielen von Videos, Wichtiger ist, Flash, iPhone diese Technologie nicht zu unterstützen ipad

• Wenn Sie sehen möchten, wie das Video abgespielt wird, bewegen Sie die Maus auf das Videofenster rechts -Klicken Sie, wenn Sie

  usw. sehen können. Text, dann verwendet die Website das Flash-Plugin Flash

• Multimedia Tags:

• Um verschiedene Probleme bei der Verwendung von Html5 zu lösen, wurde das Multimedia-Tag Flash

• Aufgrund von Probleme mit dem Videoformat: Verschiedene Browser unterstützen Videos desselben Formats unterschiedlich. Es müssen mehrere Kopien des Videos erstellt werden

• , was keinen guten Schutz für das abgespielte Video bieten kann Der Benutzer kann die Videodatei direkt speichern als

• Zusammenfassung:

• Obwohl die Multimedia-Tags in

  verschiedene Nachteile haben, müssen wir uns noch auf dieses Neue einlassen. Die Technologie ist aufgrund ihrer Verwendung wirklich einfachhtml5

in

w3c für Die Beschreibung ist wie dieses Audio-Tag audio

• Beispielcode 1:

• Die folgende Demonstration ist eine der einfachsten Möglichkeiten, sie zu verwenden

• src: Audioadresse

• Steuerelemente: Audiowiedergabe

  Controller

• Autoplay:Autoplay

• Loop:

  Loop

• Poster: Geben Sie das Cover an, das angezeigt werden soll, wenn das Video nicht abgespielt wird

<audio src="song.ogg" controls="controls" autoplay loop>
</audio>

• Beispielcode 2:

• src: Audioadresse

• Da Audioformate unterschiedlich unterstützt werden In verschiedenen Browsern müssen wir aus Kompatibilitätsgründen den folgenden Code

• Quelle verwenden: Geben Sie mehrere Audios an, die vom aktuellen Browser unterstützt werden . Wenn nicht alle

  Tag-Formate unterstützt werden, wird das letzte angezeigt Das source-Tag wird zum Abspielen von Videos verwendet und ist in seiner Verwendung dem

  -Tag sehr ähnlich

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
你的浏览器不支持此种格式
</audio>

Videoaudio

• Steuerung: Controller

Autoplay: Autoplay
Schleife: Schleife
• Breite

  : Breite

• Höhe
: Höhe

• Beispielcode 2:

<video src="movie.ogg" controls autoplay loop width = "200px" height = "200px">
</video>

src:
• Videoadresse
  Da die Videounterstützung in verschiedenen Browsern unterschiedlich ist, müssen wir aus Kompatibilitätsgründen den folgenden Code verwenden

• 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/>不设置任何内容,显示效果如下图

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>

• 显示效果即截图

meter.png

总结

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

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

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

Das obige ist der detaillierte Inhalt vonHTML5 – ausführliche Erläuterung der Multimedia-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!