HTML5 -- マルチメディアタグの詳細な説明-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 -- マルチメディアタグの詳細な説明

零下一度

May 08, 2017 pm 01:46 PM

初期のインターネットは主に学術成果の共有に使用されていましたが、一般の人にとっては、ビデオ、オーディオ などのより興味深いコンテンツを共有することに積極的でした。など。テクノロジーは <a href="http://www.php.cn/wiki/1118.html" target="_blank">html5<code>视频,音频,这些技术在<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 http://www より前には開発されていません。 php.cn/code/5011.html" target="_blank">html タグ
は、

Web オーディオおよびビデオソリューションの開発

初期の html にはビデオやオーディオの再生をサポートするタグがありませんが、これは人々の共有意欲には影響しません

サポート方法 1:
embed Insert を使用しますビデオをページに直接挿入し、Windows Media Player、Apple QuickTime、または実際のビデオプレーヤーを使用して再生ウィンドウを作成できます
ただし、この方法にはビデオ自体を制御することはできず、互換性の問題を考慮することはできません
サポート方法 2
ブラウザのプラグインを使用します。1 つは Microsoft の Silverlight で、最も一般的なのはAdobe Flash を使用しました
Flash は、ブラウザのサポート問題を完全に解決するだけでなく、驚くほど高いインストール率も備えています (基本的に 99% のコンピュータにインストールされています)。インストールされています)

Flash

iPhone

ipad

ビデオがどのように再生されるかを確認したい場合は、マウスをビデオウィンドウに移動し、Flash が表示されていれば右クリックしてください。など。テキストの場合、Web サイトは Flash プラグインを使用します

マルチメディア タグ:
🎜Html5Flash を使用してさまざまな問題を解決するために、マルチメディアタグが起動されました🎜🎜🎜🎜 ビデオ形式の問題により、ブラウザごとにサポートが異なります。同じ形式のビデオの場合、ビデオのコピーを複数用意する必要があります 🎜🎜🎜🎜 ユーザーはビデオファイルを 🎜🎜🎜🎜🎜🎜 として直接保存できるため、再生されたビデオを適切に保護することはできません概要: 🎜🎜🎜🎜 🎜🎜 html5 のマルチメディアタグにはさまざまな欠点がありますが、その使用法は非常に簡単なので、この新しいテクノロジーを受け入れる必要があります🎜🎜🎜🎜
audio タグ
🎜🎜 w3c の audio の説明🎜 はこの audio タグです🎜🎜🎜🎜 🎜🎜サンプルコード 1:🎜🎜🎜🎜🎜🎜以下は、最も簡単な使用方法を示しています🎜🎜🎜🎜src: オーディオアドレス🎜🎜🎜🎜コントロール: オーディオ再生コントローラ🎜🎜🎜🎜🎜自動再生 🎜:自動再生🎜🎜🎜🎜loop:
Loop🎜🎜🎜🎜🎜poster: 指定した動画が再生されない場合表示されたカバー🎜🎜🎜🎜
```
<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>
```
Video タグ
🎜🎜Video タグは、動画の再生に使用されます。使用方法は audio タグと非常に似ています。 🎜🎜🎜🎜🎜サンプルコード1:🎜🎜🎜🎜🎜🎜src:ビデオアドレス🎜🎜🎜🎜コントロール:コントローラー🎜🎜🎜🎜自動再生:自動再生🎜🎜🎜🎜ループ: 🎜🎜🎜🎜幅🎜:幅🎜 🎜🎜 🎜🎜height🎜:Height🎜🎜🎜🎜
```
<!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>
```
🎜🎜🎜🎜サンプルコード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></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 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

H5コードの理解：HTML5の基礎Apr 17, 2025 am 12:08 AM

HTML5は、最新のWebページを構築するための重要なテクノロジーであり、多くの新しい要素と機能を提供します。 1。HTML5は、Webページの構造とSEOを強化するなどのセマンティック要素を導入します。 2。プラグインなしのマルチメディア要素と埋め込みメディアをサポートします。 3.フォームは、新しい入力タイプと検証プロパティを強化し、検証プロセスを簡素化します。 4.オフラインおよびローカルストレージ機能を提供して、Webページのパフォーマンスとユーザーエクスペリエンスを向上させます。

H5コード：Web開発者向けのベストプラクティスApr 16, 2025 am 12:14 AM

H5コードのベストプラクティスには以下が含まれます。1。正しいDoctype宣言と文字エンコーディングを使用します。 2。セマンティックタグを使用します。 3。HTTPリクエストを削減します。 4.非同期負荷を使用します。 5。画像を最適化します。これらのプラクティスは、Webページの効率、保守性、ユーザーエクスペリエンスを向上させることができます。

H5：Web標準とテクノロジーの進化Apr 15, 2025 am 12:12 AM

Web標準とテクノロジーは、これまでにHTML4、CSS2、および単純なJavaScriptから進化し、重要な開発を受けてきました。 1）HTML5は、CanvasやWebstorageなどのAPIを導入し、Webアプリケーションの複雑さと互換性を高めます。 2）CSS3はアニメーション関数とトランジション関数を追加して、ページをより効果的にします。 3）JavaScriptは、矢印関数やクラスなど、node.jsおよびES6の最新の構文を通じて開発効率とコードの読みやすさを向上させます。これらの変更により、パフォーマンスの最適化とWebアプリケーションのベストプラクティスの開発が促進されました。

H5はHTML5の速記ですか？詳細の調査Apr 14, 2025 am 12:05 AM

H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。

H5およびHTML5：Web開発で一般的に使用される用語Apr 13, 2025 am 12:01 AM

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

H5は何を参照していますか？コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1）html5introduceSnewelementsandapisforrich、dynamicwebapplications.2）Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3）semanticelementsimprovecontentstructurendseo.4）H5'srespo

H5：ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

HTML5の遺産：現在のH5の理解Apr 10, 2025 am 09:28 AM

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1）itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2）

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、