HTML_html/css_WEB-ITnose の音声とビデオ

ディレクトリ [1] メディア形式 オーディオ形式 ビデオ形式 [2] 要素 プラグイン要素 HTML5 要素 [3] HTML オーディオ [4] HTML ビデオ

前の単語

マルチメディア要素 (ビデオやオーディオなど) は、メディア ファイルに保存されている場合、メディア タイプを判断する最も一般的な方法は、ファイル拡張子を確認することです。 .swf、.wmv、.mp3、.mp4など

Media formats

Audio formats

.mid/.midi

MIDI (Musical Instrument Digital Interface) は、電子音楽機器の一種です（合成として）フォーマット。 MIDI ファイルにはサウンドは含まれませんが、サウンド カードなどの電子製品で再生できるデジタル音楽の命令が含まれています。 MIDI フォーマットには命令のみが含まれるため、MIDI ファイルは非常に小さくなります。 MIDI は、最も一般的な Web ブラウザーでサポートされています

.rm/.ram

RealAudio 形式は、インターネット用に Real Media によって開発されました。この形式はビデオもサポートしています。この形式により、低帯域幅条件下でのオーディオ ストリーミング (オンライン音楽、ネットワーク音楽) が可能になります。低帯域が優先されるため、品質が低下することが多いです

.wav

Wave（波形）形式はIBMとMicrosoftによって開発されました。 Windows を実行しているすべてのコンピュータとすべての Web ブラウザ (Google Chrome を除く) でサポートされています

.wma

WMA 形式 (Windows Media Audio)、MP3 よりも高品質、iPod を除くほとんどのプレーヤーと互換性があります。 WMA ファイルは連続データ ストリームとして送信できるため、インターネット ラジオやオンライン音楽に便利です

.mp3/.mpga

MP3 ファイルは、実際には MPEG ファイルのサウンド部分です。 MPEG 形式は、もともと Moving Picture Experts Group によって開発されました。 MP3 は音楽で最も人気のあるサウンド形式の 1 つです

ビデオ形式

.avi

AVI (Audio Video Interleave) 形式は Microsoft によって開発されました。 Windows を実行しているすべてのコンピューターは、AVI 形式をサポートしています

.wmv

Windows Media 形式は Microsoft によって開発されました。 Windows Media はインターネット上で非常に一般的ですが、追加のコンポーネントをインストールしないと Windows Media ムービーを再生することはできません

.mpg/.mpeg

MPEG (Moving Pictures Expert Group) 形式は、インターネット上で最も人気のある形式です。クロスプラットフォームであり、最も人気のあるすべてのブラウザーでサポートされています

.mov

QuickTime 形式は Apple によって開発されました。 QuickTime はインターネット上で一般的な形式ですが、追加のコンポーネントがインストールされていない Windows コンピューターでは QuickTime ムービーを再生できません

.rm/.ram

RealVideo 形式はインターネット用に Real Media によって開発されました。この形式により、低帯域幅条件下でのビデオ ストリーミングが可能になります (オンライン ビデオ、IP TV)。低帯域が優先されるため、画質が落ちることが多いです

.swf/.flv

Flash (Shockwave) 形式は Macromedia によって開発されました。 Shockwave 形式を再生するには、追加のコンポーネントが必要です

.mp4

Mpeg-4 (H.264 ビデオ圧縮) は、インターネット用の新しい形式です。 Flash プレーヤーや HTML5 のインターネット共有形式としてこれを使用するビデオ発行者が増えています。] モバイル デバイスでは Flash などのブラウザ プラグインのサポートが不十分であり、IOS デバイスではまったくサポートされていないため、これはお勧めできません。フラッシュを使用します。オーディオとビデオを再生する必要がある場合は、ビデオとオーディオを使用してブラウザのネイティブ プレーヤーを呼び出すことができます

[プロパティ]

height    设置嵌入内容的高度width     设置嵌入内容的宽度src     设置嵌入内容的URLtype     设置嵌入内容的类型    

<embed src="helloworld.swf" width="200" height="200" type="application/x-shockwave-flash"/>

273238ce9338fbb04bee6997e5552b95

定义一挿入的对象

4265dcb8b919ac4dc6f37f9ffb3ace54

オブジェクトはオブジェクトまたは他の要素を挿入可能、如果浏览器は渲染优先的选择バックアップコンテンツを表示するだけです

【属性】

height    设置嵌入对象的高度width     设置嵌入对象的宽度type     设置嵌入对象的类型    name    设置对象的名称，以便在脚本中使用data     设置对象的URLusemap    设置与对象一同使用的客户端图像映射的URLform     规定对象所属的一个或多个表单(将object作为表单的一部分是为了解决让插件发送数据到服务器的需要)typemustmatch    检测资源类型和type属性是否相符(data和type同时设置的情况下)

埋め込みプラグインにパラメータを渡すために使用されます

【属性】

name    定义参数的名称value    规定参数的值type    规定参数的MIME类型valuetype    规定值的MIME类型(data/ref/object)

<object width="400" height="40" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">　　<param name="SRC" value="bookmark.swf">　　<embed src="bookmark.swf" width="400" height="40"></embed></object>

HTML5 要素

HTML5 では 2 つの新しいメディア関連タグが追加され、開発者はクロスブラウザーのオーディオおよびビデオ コンテンツを埋め込むことができます。これらの 2 つのタグは b97864c2e0ef2353a16c4d64c7734e92 と 39000f942b2545a5315c57fa3276f220 であり、IE8 ブラウザではサポートされていません

これら 2 つのタグでサポートされているタイプは次のとおりです:

ビデオ [1] video/ ogg [2] video/mp4 [3] video/webm

Audio [1] audio/ogg [2]audio/mpeg

b97864c2e0ef2353a16c4d64c7734e92 タグと 39000f942b2545a5315c57fa3276f220 の詳細情報はここに移動します

HTML音频

　　在HTML中播放音频的方法有很多种

【1】d8e2720730be5ddc9c2a3782839e8eb6

<embed  height="80" width="300" src="song.mp3" />

【2】273238ce9338fbb04bee6997e5552b95

<object height="80" width="300" data="song.mp3"></object>

【3】b97864c2e0ef2353a16c4d64c7734e92

<audio controls="controls">  <source src="song.mp3" type="audio/mp3" /></audio>

【4】3499910bf9dac5ae3c52d5ede7383485

<a href="song.mp3">Play the sound</a>

【5】更好的解决办法

<audio controls="controls" height="100" width="100">    <source src="song.mp3" type="audio/mp3" />    <embed height="100" width="100" src="song.mp3" /></audio>

 

HTML视频

　　在HTML中播放视频的方法也有好多种

【1】d8e2720730be5ddc9c2a3782839e8eb6

<embed  height="240" width="320" src="movie.mp4" />

【2】273238ce9338fbb04bee6997e5552b95

<object height="240" width="320" data="movie.mp4"></object>

【3】39000f942b2545a5315c57fa3276f220

<video controls="controls">  <source src="movie.mp4" type="video/mp4" /></video>

【4】3499910bf9dac5ae3c52d5ede7383485

<a href="movie.mp4">Play the video</a>

【5】更好的解决办法

<video width="320" height="240" controls="controls">  <source src="movie.mp4" type="video/mp4" />  <object data="movie.mp4" width="320" height="240">    <embed src="movie.mp4" width="320" height="240" />  </object></video>