HTMLのオーディオおよびビデオ

メディアファイルに格納されている(ビデオなど)マルチメディア要素には、メディアタイプ最も一般的に使用される方法を決定するファイルの拡張子を見ています。swfファイル、.WMV、.MP3、.MP4など

メディアのフォーマット

オーディオフォーマット

.MID / .midi

MIDI(楽器のディジタルインタフェース)は、(例えばシンセサイザーやサウンドカードなど)の電子音楽機器されているためのフォーマットです。MIDIファイルは音が含まれていませんが、デジタル音楽は、命令は、(サウンドカードなど)、電子製品を再生することができます含まれています。MIDI形式は命令のみが含まれているため、それは非常にコンパクトなMIDIファイルです。最も人気のあるWebブラウザは、MIDIをサポート

.rmという/ .RAM

RealAudioのフォーマットは、インターネットの発展のための真のメディアによって開発されました。フォーマットは、ビデオをサポートしています。このフォーマットは、低帯域幅の条件の下で、オーディオストリーム(オンライン音楽、オンライン音楽)を可能にします。そのため、低帯域幅の優先順位の、品質、多くの場合、下

.WAV

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

.WMA

WMA形式(Windows Mediaオーディオ)が、品質にはiPodを除く、ほとんどのプレーヤーとの互換性、MP3よりも優れています。WMAファイルは、インターネットラジオ局やオンライン音楽のため、それは非常に実用的になり、データの連続ストリームとして送信することができます

.MP3 / .mpga

MP3ファイルは、実際にファイルのMPEGオーディオ部分です。元々モーションピクチャーズ専門家グループによって開発されたMPEG形式。MP3は音楽のための最も人気のあるサウンドフォーマットの一つであります

ビデオフォーマット

.AVI

AVI(オーディオビデオインターリーブ)形式、マイクロソフトによって開発されました。Windowsを実行しているすべてのコンピュータは、AVI形式をサポートしています

.WMV

Windows Media形式は、Microsoftが開発されています。Windowsのメディアは、インターネット上で非常に一般的ですが、余分なコンポーネントがインストールされていない場合、あなたは、Windows Mediaムービーを再生することはできません

mpgファイル/ .MPEG

MPEGインターネット上でフォーマット(写真専門家グループを移動するには)最も人気のあるフォーマットです。それはすべての最も一般的なブラウザでサポートされている、クロスプラットフォームであります

.MOV

QuickTime形式は、Appleによって開発されています。QuickTimeは、インターネット上の一般的な形式ですが、QuickTimeムービーは、成分の量よりも、Windowsコンピュータ上で再生することはできません

.rmという/ .RAM

RealVideoのフォーマットは、インターネットの発展のための真のメディアによって開発されました。このフォーマットは、低帯域幅でのストリーミング(オンラインビデオ、インターネットTV)映像を可能にします。そのため、低帯域幅の優先順位の、品質、多くの場合、下

swfファイル/のFLV

フラッシュ(ショックウェーブ)形式は、Macromediaによって開発されました。Shockwaveのフォーマットを再生するために、余分な部品を必要とし

.MP4

MPEG-4(H.264ビデオ圧縮を有する)は、インターネットのための新しいフォーマットです。インターネット共有のFlash PlayerとHTML5形式としてより多くのビデオパブリッシャー、それを

要素

プラグインの要素

このようなフラッシュプラグとして、埋め込まれたコンテンツを定義するために使用され

注:原因フラッシュや他のブラウザのプラグインのための比較的貧弱なモバイルエンドデバイスをサポートし、IOSデバイスがサポートしていない、それは使用のフラッシュにはお勧めしません。あなたは、オーディオおよびビデオを再生する必要がある場合は、ビデオとオーディオは、ブラウザのネイティブプレーヤーを起動するために使用することができます

[プロパティ]

height    设置嵌入内容的高度
width     设置嵌入内容的宽度
src     设置嵌入内容的URL
type     设置嵌入内容的类型    
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
<embed src="helloworld.swf" width="200" height="200" type="application/x-shockwave-flash"/>

埋め込みオブジェクトの定義

<フォールバックメカニズムの内容>

ブラウザは、バックアップの内容を表示するための好ましい選択肢をレンダリングすることができない場合、オブジェクトは、ネストされたオブジェクトまたは他の要素となることができます

[プロパティ]

height    设置嵌入对象的高度
width     设置嵌入对象的宽度
type     设置嵌入对象的类型    
name    设置对象的名称,以便在脚本中使用
data     设置对象的URL
usemap    设置与对象一同使用的客户端图像映射的URL
form     规定对象所属的一个或多个表单(将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つのラベルがある<audio><video>、あなたのブラウザでサポートされていません、IE8-

このタグは、2つのタイプがあるサポートしています。

映像[1]ビデオ/ OGG [2]ビデオ/ MP4 [3]ビデオ/ WEBM

音频 [1]audio/ogg [2]audio/mpeg

HTMLオーディオ

HTMLでオーディオを再生する方法があります多くのです

【1】<embed>

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

【2】<object>

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

【3】<audio>

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

【4】<a>

<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】<embed>

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

【2】<object>

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

【3】<video>

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

【4】<a>

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

[5]よりよい解決策

专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
<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>

发布了247 篇原创文章 · 获赞 9 · 访问量 7969

おすすめ

転載: blog.csdn.net/weixin_45761317/article/details/103964701