ブログについて
このブログは、HTML5の<video>使用中のビデオを紹介します。
- はじめにおよびビデオフォーマット
- プロパティの<video>タグ
- 基本的な使用例
- <ビデオ> DOMメソッド
はじめにおよびビデオフォーマット
ウェブ上の動画を
今まで、ページ上のビデオ表示を目的とした標準的なはまだありません。今日では、ほとんどのビデオが表示される(Flashなど)のプラグインです。ただし、すべてのブラウザは、同じプラグインを持っていません。HTML5は、ビデオ要素を介してビデオを含めるための標準的な方法を提供します。
video要素は3つのビデオフォーマットをサポートしています。
- TheoraのビデオコーディングとオーディオVorbisのコーディングとのOgg =のOggファイル
- MPEG4 = MPEG 4つのH.264ビデオコーディングを持つファイルやオーディオコーディングAAC
- VP8ビデオがVorbisのコーディングコーディングし、オーディオとWebMの= WebMのファイル
異なるブラウザのサポート
フォーマット | IE | Firefoxの | オペラ | クロム | サファリ |
---|---|---|---|---|---|
オッグ | 番号 | 3.5+ | X 10.5+ | 5.0+ | 番号 |
MPEG 4 | 9.0以降 | 番号 | 番号 | 5.0+ | 3.0+ |
WebMの | 番号 | 4.0+ | 10.6以降 | 6.0+ | 番号 |
プロパティの<video>タグ
ビデオタグHTML5の<video>タグ、プロパティの<video>タグを挿入することによって、次のとおりです。
プロパティ | 値 | 説明 |
---|---|---|
SRC | URL | URLあなたは、ビデオを再生したいです。 |
幅 | ピクセル | ビデオプレーヤーの幅を設定します。 |
高さ | ピクセル | ビデオプレーヤーの高さを設定します。 |
コントロール | コントロール | この属性が存在する場合、そのような再生ボタンとして、ユーザーコントロールに表示されます。 |
自動再生 | 自動再生 | この属性が存在する場合は、準備ができた後、すぐにビデオの再生。 |
ループ | ループ | この属性が存在する場合、メディアが再び再生を開始すると、ファイルが完成演奏があります。 |
プリロード | プリロード | この属性が存在している場合は、ページがロードされ、再生の準備ができたときに、ビデオがロードされます。 あなたが「自動再生」を使用している場合、この属性は無視されます。 |
基本的な使用例
使用
<video src="E:\GIFMaker\Workplace\刚体小球.mp4" controls="controls">
Your browser does not support the video tag.
</video>
コンパチブル
異なるブラウザは異なるビデオフォーマットをサポートし、異なるブラウザとの互換性のために、ビデオ要素は、複数のソース要素を可能にします。ソース要素は、異なるビデオファイルにリンクすることができます。ブラウザは最初のフォーマット認識を使用します。
<video controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<source src="movie." type="video/WebM">
Your browser does not support the video tag.
</video>
<ビデオ> DOMメソッド
HTML5 - メソッド、プロパティ、およびイベント
HTML5の<video>要素は、メソッド、プロパティ、およびイベントを持っています。これでは、この方法は、再生、一時停止、および負荷にし、その上で使用されます。(等持続時間、ボリューム、など)の特性は、読み出しまたは設定されていてもよいです。あなたはそれを知らせることができDOMイベント、たとえば、<映像>要素の開始の再生、停止、およびその上で一時停止しました。
方法 | プロパティ | イベント |
---|---|---|
演奏する() | currentSrc | 演奏する |
一時停止() | 現在の時刻 | 休止 |
負荷() | videoWidth | 進捗 |
canPlayType | videoHeight | エラー |
期間 | timeupdate | |
終了しました | 終了しました | |
エラー | アボート | |
一時停止 | 空の | |
ミュート | 空になりました | |
シーク | 待機 | |
ボリューム | loadedmetadata | |
高さ | ||
幅 |
例のビデオ-DOM方法
シンプルなプレーを作成/ビデオやリサイズコントロールを一時停止します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Video </title>
</head>
<body>
<video id="video" src="E:\GIFMaker\Workplace\刚体小球.mp4" width=400 height=300 style="display: block;">
Your browser does not support the video tag.
</video>
<button onclick="playPause()">播放/暂停</button>
<button onclick="bigger()">放大</button>
<button onclick="normal()">正常</button>
<button onclick="smaller()">缩小</button>
<script type="text/javascript">
var video;
window.onload=function()
{
video=document.getElementById("video");
alert(video);
}
function playPause()//暂停或播放
{
if(video.paused)//现在是播放的
{
video.play();//暂停
}
else video.pause();//播放
}
function bigger()
{
video.width=1000;
}
function normal()
{
video.width=400;
}
function smaller()
{
video.width=200;
}
</script>
</body>
</html>