HTML5のビデオ映像

ブログについて

このブログは、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
  高さ  
   
注:すべてのプロパティでは、唯一のvideoWidthとvideoHeightプロパティがすぐに利用可能です。動画のメタデータがロードされた後、他のプロパティが利用可能です。

例のビデオ-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>

ここに画像を挿入説明
ここに画像を挿入説明

ここに画像を挿入説明

公開された125元の記事 ウォンの賞賛136 ・は 30000 +を見て

おすすめ

転載: blog.csdn.net/weixin_44307065/article/details/104115435