From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/htmlmediaelement/abort_event/index.html | 88 +++++++ .../api/htmlmediaelement/audiotracks/index.html | 90 +++++++ .../web/api/htmlmediaelement/autoplay/index.html | 92 +++++++ .../web/api/htmlmediaelement/buffered/index.html | 65 +++++ .../api/htmlmediaelement/canplay_event/index.html | 107 ++++++++ .../canplaythrough_event/index.html | 126 +++++++++ .../api/htmlmediaelement/canplaytype/index.html | 83 ++++++ .../api/htmlmediaelement/capturestream/index.html | 96 +++++++ .../web/api/htmlmediaelement/controller/index.html | 56 ++++ .../web/api/htmlmediaelement/controls/index.html | 63 +++++ .../api/htmlmediaelement/crossorigin/index.html | 48 ++++ .../web/api/htmlmediaelement/currentsrc/index.html | 63 +++++ .../api/htmlmediaelement/currenttime/index.html | 88 +++++++ .../api/htmlmediaelement/defaultmuted/index.html | 67 +++++ .../defaultplaybackrate/index.html | 64 +++++ .../disableremoteplayback/index.html | 52 ++++ .../web/api/htmlmediaelement/duration/index.html | 62 +++++ .../durationchange_event/index.html | 124 +++++++++ .../api/htmlmediaelement/emptied_event/index.html | 124 +++++++++ files/ja/web/api/htmlmediaelement/ended/index.html | 68 +++++ .../api/htmlmediaelement/ended_event/index.html | 148 +++++++++++ files/ja/web/api/htmlmediaelement/error/index.html | 73 +++++ .../api/htmlmediaelement/error_event/index.html | 88 +++++++ files/ja/web/api/htmlmediaelement/index.html | 293 +++++++++++++++++++++ files/ja/web/api/htmlmediaelement/load/index.html | 86 ++++++ .../htmlmediaelement/loadeddata_event/index.html | 136 ++++++++++ .../loadedmetadata_event/index.html | 159 +++++++++++ .../htmlmediaelement/loadstart_event/index.html | 163 ++++++++++++ files/ja/web/api/htmlmediaelement/loop/index.html | 64 +++++ .../web/api/htmlmediaelement/mediagroup/index.html | 56 ++++ files/ja/web/api/htmlmediaelement/muted/index.html | 65 +++++ .../api/htmlmediaelement/networkstate/index.html | 108 ++++++++ .../ja/web/api/htmlmediaelement/onerror/index.html | 60 +++++ files/ja/web/api/htmlmediaelement/pause/index.html | 59 +++++ .../api/htmlmediaelement/pause_event/index.html | 142 ++++++++++ .../ja/web/api/htmlmediaelement/paused/index.html | 62 +++++ files/ja/web/api/htmlmediaelement/play/index.html | 134 ++++++++++ .../web/api/htmlmediaelement/play_event/index.html | 128 +++++++++ .../api/htmlmediaelement/playbackrate/index.html | 73 +++++ .../api/htmlmediaelement/playing_event/index.html | 129 +++++++++ .../api/htmlmediaelement/progress_event/index.html | 163 ++++++++++++ .../htmlmediaelement/ratechange_event/index.html | 124 +++++++++ .../web/api/htmlmediaelement/readystate/index.html | 116 ++++++++ .../web/api/htmlmediaelement/seekable/index.html | 76 ++++++ .../api/htmlmediaelement/seeked_event/index.html | 124 +++++++++ .../api/htmlmediaelement/seeking_event/index.html | 124 +++++++++ files/ja/web/api/htmlmediaelement/src/index.html | 67 +++++ .../web/api/htmlmediaelement/srcobject/index.html | 84 ++++++ .../api/htmlmediaelement/stalled_event/index.html | 124 +++++++++ .../api/htmlmediaelement/suspend_event/index.html | 128 +++++++++ .../htmlmediaelement/timeupdate_event/index.html | 130 +++++++++ .../api/htmlmediaelement/videotracks/index.html | 63 +++++ .../ja/web/api/htmlmediaelement/volume/index.html | 64 +++++ .../htmlmediaelement/volumechange_event/index.html | 132 ++++++++++ .../api/htmlmediaelement/waiting_event/index.html | 131 +++++++++ 55 files changed, 5502 insertions(+) create mode 100644 files/ja/web/api/htmlmediaelement/abort_event/index.html create mode 100644 files/ja/web/api/htmlmediaelement/audiotracks/index.html create mode 100644 files/ja/web/api/htmlmediaelement/autoplay/index.html create mode 100644 files/ja/web/api/htmlmediaelement/buffered/index.html create mode 100644 files/ja/web/api/htmlmediaelement/canplay_event/index.html create mode 100644 files/ja/web/api/htmlmediaelement/canplaythrough_event/index.html create mode 100644 files/ja/web/api/htmlmediaelement/canplaytype/index.html create mode 100644 files/ja/web/api/htmlmediaelement/capturestream/index.html create mode 100644 files/ja/web/api/htmlmediaelement/controller/index.html create mode 100644 files/ja/web/api/htmlmediaelement/controls/index.html create mode 100644 files/ja/web/api/htmlmediaelement/crossorigin/index.html create mode 100644 files/ja/web/api/htmlmediaelement/currentsrc/index.html create mode 100644 files/ja/web/api/htmlmediaelement/currenttime/index.html create mode 100644 files/ja/web/api/htmlmediaelement/defaultmuted/index.html create mode 100644 files/ja/web/api/htmlmediaelement/defaultplaybackrate/index.html create mode 100644 files/ja/web/api/htmlmediaelement/disableremoteplayback/index.html create mode 100644 files/ja/web/api/htmlmediaelement/duration/index.html create mode 100644 files/ja/web/api/htmlmediaelement/durationchange_event/index.html create mode 100644 files/ja/web/api/htmlmediaelement/emptied_event/index.html create mode 100644 files/ja/web/api/htmlmediaelement/ended/index.html create mode 100644 files/ja/web/api/htmlmediaelement/ended_event/index.html create mode 100644 files/ja/web/api/htmlmediaelement/error/index.html create mode 100644 files/ja/web/api/htmlmediaelement/error_event/index.html create mode 100644 files/ja/web/api/htmlmediaelement/index.html create mode 100644 files/ja/web/api/htmlmediaelement/load/index.html create mode 100644 files/ja/web/api/htmlmediaelement/loadeddata_event/index.html create mode 100644 files/ja/web/api/htmlmediaelement/loadedmetadata_event/index.html create mode 100644 files/ja/web/api/htmlmediaelement/loadstart_event/index.html create mode 100644 files/ja/web/api/htmlmediaelement/loop/index.html create mode 100644 files/ja/web/api/htmlmediaelement/mediagroup/index.html create mode 100644 files/ja/web/api/htmlmediaelement/muted/index.html create mode 100644 files/ja/web/api/htmlmediaelement/networkstate/index.html create mode 100644 files/ja/web/api/htmlmediaelement/onerror/index.html create mode 100644 files/ja/web/api/htmlmediaelement/pause/index.html create mode 100644 files/ja/web/api/htmlmediaelement/pause_event/index.html create mode 100644 files/ja/web/api/htmlmediaelement/paused/index.html create mode 100644 files/ja/web/api/htmlmediaelement/play/index.html create mode 100644 files/ja/web/api/htmlmediaelement/play_event/index.html create mode 100644 files/ja/web/api/htmlmediaelement/playbackrate/index.html create mode 100644 files/ja/web/api/htmlmediaelement/playing_event/index.html create mode 100644 files/ja/web/api/htmlmediaelement/progress_event/index.html create mode 100644 files/ja/web/api/htmlmediaelement/ratechange_event/index.html create mode 100644 files/ja/web/api/htmlmediaelement/readystate/index.html create mode 100644 files/ja/web/api/htmlmediaelement/seekable/index.html create mode 100644 files/ja/web/api/htmlmediaelement/seeked_event/index.html create mode 100644 files/ja/web/api/htmlmediaelement/seeking_event/index.html create mode 100644 files/ja/web/api/htmlmediaelement/src/index.html create mode 100644 files/ja/web/api/htmlmediaelement/srcobject/index.html create mode 100644 files/ja/web/api/htmlmediaelement/stalled_event/index.html create mode 100644 files/ja/web/api/htmlmediaelement/suspend_event/index.html create mode 100644 files/ja/web/api/htmlmediaelement/timeupdate_event/index.html create mode 100644 files/ja/web/api/htmlmediaelement/videotracks/index.html create mode 100644 files/ja/web/api/htmlmediaelement/volume/index.html create mode 100644 files/ja/web/api/htmlmediaelement/volumechange_event/index.html create mode 100644 files/ja/web/api/htmlmediaelement/waiting_event/index.html (limited to 'files/ja/web/api/htmlmediaelement') diff --git a/files/ja/web/api/htmlmediaelement/abort_event/index.html b/files/ja/web/api/htmlmediaelement/abort_event/index.html new file mode 100644 index 0000000000..e7817dd0d1 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/abort_event/index.html @@ -0,0 +1,88 @@ +--- +title: 'HTMLMediaElement: abort イベント' +slug: Web/API/HTMLMediaElement/abort_event +tags: + - API + - Event + - HTMLMediaElement + - Reference + - Web + - abort + - イベント +translation_of: Web/API/HTMLMediaElement/abort_event +--- +
{{APIRef}}
+ +

abort イベントは、リソースが完全に読み込まれなかったが、それがエラーの結果ではなかった場合に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onabort", "onabort")}}
+ +

例

+ +
const video = document.querySelector('video');
+const videoSrc = 'https://path/to/video.webm';
+
+video.addEventListener('abort', () => {
+  console.log(`Abort loading: ${videoSrc}`);
+});
+
+const source = document.createElement('source');
+source.setAttribute('src', videoSrc);
+source.setAttribute('type', 'video/webm');
+
+video.appendChild(source);
+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('HTML WHATWG', "media.html#event-media-abort")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-abort")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.HTMLMediaElement.abort_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/audiotracks/index.html b/files/ja/web/api/htmlmediaelement/audiotracks/index.html new file mode 100644 index 0000000000..67d0bfafd1 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/audiotracks/index.html @@ -0,0 +1,90 @@ +--- +title: HTMLMediaElement.audioTracks +slug: Web/API/HTMLMediaElement/audioTracks +tags: + - API + - Audio + - Audio Tracks + - HTML DOM + - HTMLMediaElement + - Media + - Property + - Reference + - Tracks + - Web + - audiotracks +translation_of: Web/API/HTMLMediaElement/audioTracks +--- +
{{APIRef("HTML DOM")}}{{draft}}
+ +

{{domxref("HTMLMediaElement")}} オブジェクトの読み取り専用の audioTracks プロパティは、メディア要素の音声トラックを表すすべての {{domxref("AudioTrack")}} オブジェクトを列挙した {{domxref("AudioTrackList")}} オブジェクトを返します。 メディア要素は、{{HTMLElement("audio")}} 要素または {{HTMLElement("video")}} 要素のどちらでもかまいません。

+ +

返されたリストはライブです。 つまり、トラックがメディア要素に追加されたり取り除かれたりすると、リストの内容は動的に変化します。 リストへの参照を取得したら、新しい音声トラックが追加されたのか既存のトラックが取り除かれたのかを検出するために変更を監視できます。 メディア要素のトラックリストへの変更を監視する方法の詳細については、{{domxref("AudioTrackList")}} のイベントハンドラを参照してください。

+ +

構文

+ +
var audioTracks = mediaElement.audioTracks;
+ +

値

+ +

メディア要素に含まれる音声トラックのリストを表す {{domxref("AudioTrackList")}} オブジェクト。 トラックのリストは、配列記法や、オブジェクトの {{domxref("AudioTrackList.getTrackById", "getTrackById()")}} メソッドを使ってアクセスできます。

+ +

各トラックは、そのトラックに関する情報を提供する {{domxref("AudioTrack")}} オブジェクトによって表されます。

+ +

例

+ +

この例では、特定の要素のすべての音声トラックをミュートしています。

+ +

HTML

+ +

HTML は、要素自体を確立します。

+ +
<video id="video" src="somevideo.mp4"></video>
+
+ +

JavaScript

+ +

JavaScript コードは、動画要素の音声トラックのミュートを処理します。

+ +
var video = document.getElementById("video");
+
+for (var i = 0; i < video.audioTracks.length; i += 1) {
+  video.audioTracks[i].enabled = false;
+}
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "#dom-media-audiotracks", "HTMLMediaElement.audioTracks")}}{{Spec2('HTML WHATWG')}}{{SpecName('HTML5 W3C')}} から変更なし
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.audioTracks")}}{{Spec2('HTML5 W3C')}}初期定義
+ +

ブラウザーの対応

+ + + +

{{Compat("api.HTMLMediaElement.audioTracks")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/autoplay/index.html b/files/ja/web/api/htmlmediaelement/autoplay/index.html new file mode 100644 index 0000000000..d7a8a29659 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/autoplay/index.html @@ -0,0 +1,92 @@ +--- +title: HTMLMediaElement.autoplay +slug: Web/API/HTMLMediaElement/autoplay +tags: + - API + - Audio + - HTML DOM + - HTMLMediaElement + - Media + - Property + - Video + - Web + - autoplay +translation_of: Web/API/HTMLMediaElement/autoplay +--- +

{{APIRef("HTML DOM")}}

+ +

HTMLMediaElement.autoplay プロパティは、 HTML の {{htmlattrxref("autoplay", "video")}} 属性を反映しています。 これは、中断することなく十分なメディアが使用可能になった時点で再生を自動的に開始するかどうかを示します。

+ +

ソースが {{domxref("MediaStream")}} で autoplay プロパティが true のメディア要素は、アクティブになると（つまり、{{domxref("MediaStream.active")}} が true になると）再生を開始します。

+ +
+

注: 自動的に音声（または音声トラックを含む動画）を再生するサイトは、ユーザーにとって不快な経験になる可能性があるため、可能な限り避けるべきです。 自動再生機能を提供する必要がある場合は、オプトインする必要があります（ユーザーに明確に有効にするよう要求する）。 ただし、自動再生は、ソースが後でユーザーの制御下で設定されるメディア要素を作成するときには便利です。

+
+ +

自動再生、自動再生のブロック、およびユーザーのブラウザーによって自動再生がブロックされた場合の対応方法についての詳細は、メディアおよびウェブオーディオ API の自動再生ガイドを参照してください。

+ +

構文

+ +
HTMLMediaElement.autoplay = true | false;
+
+var autoplay = HTMLMediaElement.autoplay;
+ +

値

+ +

{{jsxref("Boolean")}} で、中断することなく再生できるように十分なコンテンツが読み込まれると同時にメディア要素が再生を開始する場合、この値は true です。

+ +
+

注: 一部のブラウザーでは、ユーザーに無断でまたはバックグラウンドで破壊的な音声または動画が再生されるのを防ぐために、 autoplay を無効にすることができます。 autoplay が実際に再生を開始することに頼らないでください。

+
+ +

例

+ +

...

+ +
<video id="video" controls>
+  <source src="https://player.vimeo.com/external/250688977.sd.mp4?s=d14b1f1a971dde13c79d6e436b88a6a928dfe26b&profile_id=165">
+</video>
+ +

 

+ +
*** Disable autoplay (recommended) ***
+訳: *** 自動再生を無効にする（推奨） ***
+      false is the default value
+      訳: デフォルト値は false です。
+        document.querySelector('#video').autoplay = false;
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "embedded-content.html#dom-media-autoplay", "HTMLMediaElement.autoplay")}}{{Spec2('HTML WHATWG')}}{{SpecName('HTML5 W3C')}} から変更なし
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.autoplay")}}{{Spec2('HTML5 W3C')}}初期定義
+ +

ブラウザーの対応

+ + + +

{{Compat("api.HTMLMediaElement.autoplay")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/buffered/index.html b/files/ja/web/api/htmlmediaelement/buffered/index.html new file mode 100644 index 0000000000..65be362b0d --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/buffered/index.html @@ -0,0 +1,65 @@ +--- +title: HTMLMediaElement.buffered +slug: Web/API/HTMLMediaElement/buffered +tags: + - API + - HTML DOM + - HTMLMediaElement + - Property + - Read-only + - Web +translation_of: Web/API/HTMLMediaElement/buffered +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLMediaElement.buffered 読み取り専用プロパティは、buffered プロパティにアクセスした時点でブラウザーがバッファリングしているメディアソースの範囲（存在する場合）を示す新しい {{domxref("TimeRanges")}} オブジェクトを返します。

+ +
注: この機能は Web Workers では利用できません。
+ +

構文

+ +
var timeRange = audioObject.buffered
+ +

値

+ +

{{domxref("TimeRanges")}} オブジェクト。 このオブジェクトは正規化されています。 つまり、複数の範囲は順序付けされており、（隣接する範囲は1つの大きな範囲に折りたたまれて、）重なり合ったり、空だったり、接触していたりすることはありません。

+ +

例

+ +
var obj = document.createElement('video');
+console.log(obj.buffered); // TimeRanges { length: 0 }
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "embedded-content.html#media-elements", "HTMLMediaElement.buffered")}}{{Spec2('HTML WHATWG')}}{{SpecName('HTML5 W3C')}} から変更なし
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.buffered")}}{{Spec2('HTML5 W3C')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.buffered")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/canplay_event/index.html b/files/ja/web/api/htmlmediaelement/canplay_event/index.html new file mode 100644 index 0000000000..b785c545bf --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/canplay_event/index.html @@ -0,0 +1,107 @@ +--- +title: 'HTMLMediaElement: canplay イベント' +slug: Web/API/HTMLMediaElement/canplay_event +translation_of: Web/API/HTMLMediaElement/canplay_event +--- +
{{APIRef("HTMLMediaElement")}}
+ +

canplay イベントは、ユーザーエージェントがメディアを再生できるようになったものの、追加のバッファリングのために停止することなくメディアの最後まで再生するには充分なデータが読み込まれていないとみられる場合に発生します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能なし
インターフェイス{{DOMxRef("Event")}}
対象Element
既定のアクションなし
イベントハンドラーのプロパティ{{domxref("GlobalEventHandlers.oncanplay")}}
仕様書HTML5 media
+ +

プロパティ

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
プロパティ種類説明
target {{readonlyInline}}{{domxref("EventTarget")}}イベントのターゲット (DOM ツリー内での最上位のターゲット)
type {{readonlyInline}}{{domxref("DOMString")}}イベントの型
bubbles {{readonlyInline}}{{jsxref("Boolean")}}イベントがバブリングするかどうか
cancelable {{readonlyInline}}{{jsxref("Boolean")}}イベントがキャンセル可能であるかどうか
+ + + + + +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/canplaythrough_event/index.html b/files/ja/web/api/htmlmediaelement/canplaythrough_event/index.html new file mode 100644 index 0000000000..68a3203d29 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/canplaythrough_event/index.html @@ -0,0 +1,126 @@ +--- +title: 'HTMLMedia​Element: canplaythrough イベント' +slug: Web/API/HTMLMediaElement/canplaythrough_event +tags: + - Audio + - Event + - HTMLMediaElement + - Reference + - Video +translation_of: Web/API/HTMLMediaElement/canplaythrough_event +--- +

{{APIRef("HTMLMediaElement")}}

+ +

canplaythrough イベントは、ユーザーエージェントがメディアを再生可能なときに発生し、コンテンツをさらにバッファリングするために再生を停止することなく、メディアを最後まで再生するのに十分なデータが読み込まれたと推定します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{DOMxRef("Event")}}
対象要素
既定のアクションなし
イベントハンドラプロパティ{{domxref("GlobalEventHandlers.oncanplaythrough")}}
仕様HTML5 メディア
+ +

例

+ +

これらの例では、HTMLMediaElement の canplaythrough イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。

+ +

AddEventListener() を使用する場合

+ +
const video = document.querySelector('video');
+
+video.addEventListener('canplaythrough', (event) => {
+  console.log('バッファリングを止めることなく、' + '
+      動画全体を再生できると思います。');
+});
+ +

oncanplaythrough イベントハンドラプロパティを使用する場合

+ +
const video = document.querySelector('video');
+
+video.oncanplaythrough = (event) => {
+  console.log('バッファリングを止めることなく、' + '
+      動画全体を再生できると思います。');
+};
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態
{{SpecName('HTML WHATWG', "media.html#event-media-canplaythrough", "canplaythrough media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-canplaythrough", "canplaythrough media event")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.canplaythrough_event")}}

+ + + + + +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/canplaytype/index.html b/files/ja/web/api/htmlmediaelement/canplaytype/index.html new file mode 100644 index 0000000000..c2111d9f68 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/canplaytype/index.html @@ -0,0 +1,83 @@ +--- +title: HTMLMediaElement.canPlayType() +slug: Web/API/HTMLMediaElement/canPlayType +tags: + - API + - HTML DOM + - HTMLMediaElement + - Method + - Web +translation_of: Web/API/HTMLMediaElement/canPlayType +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLMediaElement.canPlayType() メソッドは、指定されたメディアタイプを再生できるかどうかを決定します。

+ +
注: この機能は Web Workers では利用できません。
+ +

構文

+ +
str = audioOrVideo.canPlayType(mediaType);
+
+ +

パラメーター

+ +
+
mediaType
+
メディアの MIME タイプを含む {{domxref("DOMString")}}。
+
+ +

戻り値

+ +

{{jsxref('String')}} 型。 可能な値は次のとおりです。

+ + + +
+

注: 以前は canPlayType('video/webm') は 'probably' を返しました。 Gecko 28 (Firefox 28 / Thunderbird 28 / SeaMonkey 2.25 / Firefox OS 1.3) 以降では、'maybe' を返します。 ({{bug(884275)}})

+
+ +

例

+ +
var obj = document.createElement('video');
+console.log(obj.canPlayType('video/mp4')); // "maybe"
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "#dom-navigator-canplaytype", "canplaytype")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.canplaytype")}}{{Spec2('HTML5 W3C')}}初期定義
+ +

ブラウザーの対応

+ + + +

{{Compat("api.HTMLMediaElement.canPlayType")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/capturestream/index.html b/files/ja/web/api/htmlmediaelement/capturestream/index.html new file mode 100644 index 0000000000..cb38276621 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/capturestream/index.html @@ -0,0 +1,96 @@ +--- +title: HTMLMediaElement.captureStream() +slug: Web/API/HTMLMediaElement/captureStream +tags: + - API + - Audio + - HTML DOM + - HTMLMediaElement + - Media + - Media Capture DOM Elements + - Method + - Reference + - Video + - captureStream +translation_of: Web/API/HTMLMediaElement/captureStream +--- +
{{APIRef("HTML Media Capture")}}
+ +

{{domxref("HTMLMediaElement")}} インターフェイスの captureStream() プロパティは、メディア要素でレンダリングされているコンテンツのリアルタイムキャプチャをストリーミングしている {{domxref('MediaStream')}} オブジェクトを返します。

+ +

これは、例えば WebRTC の {{domxref("RTCPeerConnection")}} のソースとして使用できます。

+ +

構文

+ +
var mediaStream = mediaElement.captureStream()
+ +

パラメーター

+ +

無し。

+ +

戻り値

+ +

他のメディア処理コードによる音声データおよび/または動画データのソースとして、または WebRTC のソースとして使用できる {{domxref('MediaStream')}} オブジェクト。

+ +

例

+ +

この例では、イベントハンドラが確立されているため、ボタンをクリックすると、ID が "playback" のメディア要素のコンテンツの {{domxref("MediaStream")}} へのキャプチャを開始します。 これにより、WebRTC を介したストリーミングのソースなど、他の目的にストリームを使用して、動画通話中に録画済みの動画を他の人と共有できるようになります。

+ +
document.querySelector('.playAndRecord').addEventListener('click', function() {
+  var playbackElement = document.getElementById("playback");
+  var captureStream = playbackElement.captureStream();
+  playbackElement.play();
+});
+
+ +

より長くより複雑な例と説明については、メディア要素の記録を参照してください。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Media Capture DOM Elements','#widl-HTMLMediaElement-captureStream-MediaStream','captureStream()')}}{{Spec2('Media Capture DOM Elements')}}初期定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.HTMLMediaElement.captureStream")}}

+ +

Firefox 特有のメモ

+
+ +

Firefox 51 より前のバージョンでは、ソースがそれ自体が {{domxref("MediaStream")}} であるメディア要素では、captureStream() を使用できませんでした（{{domxref("RTCPeerConnection")}} を介して受信されるストリームを表示している {{HTMLElement("video")}} 要素など）。 Firefox 51 以降、これは機能します。 これは、動画要素からストリームをキャプチャし、それを記録するために {{domxref("MediaRecorder")}} を使用できることを意味します。 詳細は {{bug(1259788)}} をご覧ください。

+ +

ただし、正当な理由で、Firefox では captureStream() の先頭に mozCaptureStream() が付いています。 現在の実装には、次のような注目に値するいくつかの奇妙な点があります。

+ + + +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/controller/index.html b/files/ja/web/api/htmlmediaelement/controller/index.html new file mode 100644 index 0000000000..031c1ab007 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/controller/index.html @@ -0,0 +1,56 @@ +--- +title: HTMLMediaElement.controller +slug: Web/API/HTMLMediaElement/controller +tags: + - API + - HTML DOM + - HTMLMediaElement + - Property + - Web +translation_of: Web/API/HTMLMediaElement/controller +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLMediaElement.controller プロパティは、要素に割り当てられたメディアコントローラを表します。

+ +

構文

+ +
...
+ +

値

+ +

{{domxref("MediaController")}} オブジェクトまたは、要素にメディアコントローラが割り当てられていない場合は null。 デフォルトは null です。

+ +

例

+ +
...
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.controller")}}{{Spec2('HTML5 W3C')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.controller")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/controls/index.html b/files/ja/web/api/htmlmediaelement/controls/index.html new file mode 100644 index 0000000000..dced46f501 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/controls/index.html @@ -0,0 +1,63 @@ +--- +title: HTMLMediaElement.controls +slug: Web/API/HTMLMediaElement/controls +tags: + - API + - HTML DOM + - HTMLMediaElement + - Property + - Web +translation_of: Web/API/HTMLMediaElement/controls +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLMediaElement.controls プロパティには、{{htmlattrxref("controls", "video")}} HTML 属性が反映されます。 これは、メディア項目を再生するためのユーザーインターフェイスのコントロールを表示するかどうかを制御します。

+ +

構文

+ +
var ctrls = video.controls;
+audio.controls = true;
+ +

値

+ +

{{jsxref("Boolean")}}。 値が true の場合、コントロールが表示されます。

+ +

例

+ +
var obj = document.createElement('video');
+obj.controls = true;
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "#dom-media-controls", "HTMLMediaElement.controls")}}{{Spec2('HTML WHATWG')}}{{SpecName('HTML5 W3C')}} から変更なし
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.controls")}}{{Spec2('HTML5 W3C')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.controls")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/crossorigin/index.html b/files/ja/web/api/htmlmediaelement/crossorigin/index.html new file mode 100644 index 0000000000..01ea73e122 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/crossorigin/index.html @@ -0,0 +1,48 @@ +--- +title: HTMLMediaElement.crossOrigin +slug: Web/API/HTMLMediaElement/crossOrigin +tags: + - API + - HTML DOM + - HTMLMediaElement + - Property + - Web +translation_of: Web/API/HTMLMediaElement/crossOrigin +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLMediaElement.crossOrigin プロパティは、画像等の要素のための CORS 設定です。 詳しくは、CORS 設定属性を参照してください。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "#attr-media-crossorigin", "HTMLMediaElement.crossOrigin")}}{{Spec2('HTML WHATWG')}}{{SpecName('HTML5 W3C')}} から変更なし
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.crossOrigin")}}{{Spec2('HTML5 W3C')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.crossOrigin")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/currentsrc/index.html b/files/ja/web/api/htmlmediaelement/currentsrc/index.html new file mode 100644 index 0000000000..a7750b22fc --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/currentsrc/index.html @@ -0,0 +1,63 @@ +--- +title: HTMLMediaElement.currentSrc +slug: Web/API/HTMLMediaElement/currentSrc +tags: + - API + - HTML DOM + - HTMLMediaElement + - Property + - Read-only + - Web +translation_of: Web/API/HTMLMediaElement/currentSrc +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLMediaElement.currentSrc プロパティには、選択されたメディアリソースの絶対 URL が含まれています。 これは、例えば、ウェブサーバーがユーザーのディスプレイの解像度に基づいてメディアファイルを選択した場合に発生する可能性があります。 networkState プロパティが EMPTY の場合、値は空の文字列です。

+ +

構文

+ +
var mediaUrl = audioObject.currentSrc;
+ +

値

+ +

選択されたメディアソースの絶対 URL を含む {{domxref("DOMString")}} オブジェクト。 networkState が EMPTY の場合、これは空の文字列になります。 それ以外の場合は、メディア要素内に含まれる {{domxref("HTMLSourceElement")}} によってリストされたリソースのいずれか、{{HTMLElement("source")}} 要素が指定されていない場合は値または src になります。

+ +

例

+ +
var obj = document.createElement('video');
+console.log(obj.currentSrc); // ""
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "#dom-media-currentsrc", "HTMLMediaElement.currentSrc")}}{{Spec2('HTML WHATWG')}}{{SpecName('HTML5 W3C')}} から変更なし
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.currentSrc")}}{{Spec2('HTML5 W3C')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.currentSrc")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/currenttime/index.html b/files/ja/web/api/htmlmediaelement/currenttime/index.html new file mode 100644 index 0000000000..4d6f0e836e --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/currenttime/index.html @@ -0,0 +1,88 @@ +--- +title: HTMLMediaElement.currentTime +slug: Web/API/HTMLMediaElement/currentTime +tags: + - API + - HTML DOM + - HTMLMediaElement + - Property + - WebMechanics +translation_of: Web/API/HTMLMediaElement/currentTime +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLMediaElement.currentTime プロパティは、現在の再生時間を秒単位で示します。 この値を設定すると、メディアは新しい時間にシークされます。

+ +

構文

+ +
var cTime = video.currentTime;
+video.currentTime = 35;
+
+ +

値

+ +

double 型。

+ +

例

+ +
var video = document.createElement('video');
+console.log(video.currentTime);
+
+ +

時間精度の引き下げ

+ +

タイミング攻撃やフィンガープリンティングに対する保護を提供するために、video.currentTime の精度はブラウザーの設定によっては四捨五入される可能性があります。
+ Firefox では、privacy.reduceTimerPrecision 設定がデフォルトで有効になっており、Firefox 59 ではデフォルトで 20us に設定されていますが、Firefox 60 では 2ms になります。

+ +
// Firefox 60 における時間精度の引き下げ (2ms)
+video.currentTime;
+// 23.404
+// 24.192
+// 25.514
+// ...
+
+
+// `privacy.resistFingerprinting` を有効にしての時間精度の引き下げ
+video.currentTime;
+// 49.8
+// 50.6
+// 51.7
+// ...
+
+ +

Firefox では、privacy.resistFingerprinting を有効にすることもでき、精度は 100ms または privacy.resistFingerprinting.reduceTimerPrecision.microseconds のいずれか大きい方の値になります。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "embedded-content.html#dom-media-currenttime", "HTMLMediaElement.currentTime")}}{{Spec2('HTML WHATWG')}}{{SpecName('HTML5 W3C')}} から変更なし
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.currentTime")}}{{Spec2('HTML5 W3C')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.currentTime")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/defaultmuted/index.html b/files/ja/web/api/htmlmediaelement/defaultmuted/index.html new file mode 100644 index 0000000000..02c00b4d30 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/defaultmuted/index.html @@ -0,0 +1,67 @@ +--- +title: HTMLMediaElement.defaultMuted +slug: Web/API/HTMLMediaElement/defaultMuted +tags: + - API + - HTML DOM + - HTMLMediaElement + - Property + - Web +translation_of: Web/API/HTMLMediaElement/defaultMuted +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLMediaElement.defaultMuted プロパティは、メディア要素の音声出力をデフォルトでミュートするかどうかを示す、{{htmlattrxref("muted", "video")}} HTML 属性を反映します。 このプロパティは動的な効果はありません。 音声出力をミュートおよびミュート解除するには、{{domxref("HTMLMediaElement.muted", "muted")}} プロパティを使用します。

+ +

構文

+ +
var dMuted = video.defaultMuted;
+audio.defaultMuted = true;
+
+ +

値

+ +

{{jsxref("Boolean")}}。 値が true の場合、音声出力はデフォルトでミュートされます。

+ +

例

+ +
var videoEle = document.createElement('video');
+videoEle.defaultMuted = true;
+console.log(videoEle.outerHTML); // <video muted=""></video>
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "#dom-media-defaultmuted", "HTMLMediaElement.defaultMuted")}}{{Spec2('HTML WHATWG')}}{{SpecName('HTML5 W3C')}} から変更なし
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.defaultMuted")}}{{Spec2('HTML5 W3C')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.defaultMuted")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/defaultplaybackrate/index.html b/files/ja/web/api/htmlmediaelement/defaultplaybackrate/index.html new file mode 100644 index 0000000000..6a9f108356 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/defaultplaybackrate/index.html @@ -0,0 +1,64 @@ +--- +title: HTMLMediaElement.defaultPlaybackRate +slug: Web/API/HTMLMediaElement/defaultPlaybackRate +tags: + - API + - HTML DOM + - HTMLMediaElement + - Property + - Web +translation_of: Web/API/HTMLMediaElement/defaultPlaybackRate +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLMediaElement.defaultPlaybackRate プロパティは、メディアのデフォルトの再生速度を示します。

+ +

構文

+ +
var dSpeed = video.defaultPlaybackRate;
+audio.defaultPlaybackRate = 1.0;
+
+ +

値

+ +

double 型。 1.0 が「標準速度」で、1.0 より小さい値はメディアの再生速度を標準より遅くし、値を大きくすると再生速度は速くなります。 値 0.0 は無効で、NOT_SUPPORTED_ERR 例外をスローします。

+ +

例

+ +
var obj = document.createElement('video');
+console.log(obj.defaultPlaybackRate); // 1
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "#dom-media-defaultplaybackrate", "HTMLMediaElement.defaultPlaybackRate")}}{{Spec2('HTML WHATWG')}}{{SpecName('HTML5 W3C')}} から変更なし
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.defaultPlaybackRate")}}{{Spec2('HTML5 W3C')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.defaultPlaybackRate")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/disableremoteplayback/index.html b/files/ja/web/api/htmlmediaelement/disableremoteplayback/index.html new file mode 100644 index 0000000000..c2b836e08b --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/disableremoteplayback/index.html @@ -0,0 +1,52 @@ +--- +title: HTMLMediaElement.disableRemotePlayback +slug: Web/API/HTMLMediaElement/disableRemotePlayback +translation_of: Web/API/HTMLMediaElement/disableRemotePlayback +--- +

{{APIRef("HTML DOM")}}

+ +

HTMLMediaElement.disableRemotePlayback プロパティは、メディア要素がリモート再生 UI を持つことを許可するかどうかを決定します。

+ +

構文

+ +
var remotePlaybackState ​= element.disableRemotePlayback();
+ +

値

+ +

メディア要素にリモート再生 UI があるかどうかを示す {{jsxref("Boolean")}}。

+ +

例

+ +
var obj = document.createElement('audio');
+obj.disableRemotePlayback = true;
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML5 W3C', "#embedded-content-0.html#htmlmediaelement", "disableRemotePlayback")}}{{Spec2('HTML5 W3C')}}初期定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.HTMLMediaElement.disableRemotePlayback")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/duration/index.html b/files/ja/web/api/htmlmediaelement/duration/index.html new file mode 100644 index 0000000000..9ad490c6c2 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/duration/index.html @@ -0,0 +1,62 @@ +--- +title: HTMLMediaElement.duration +slug: Web/API/HTMLMediaElement/duration +tags: + - API + - HTML DOM + - HTMLMediaElement + - Property + - Web +translation_of: Web/API/HTMLMediaElement/duration +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLMediaElement.duration プロパティは、メディアの長さを秒単位で示します。 使用可能なメディアデータがない場合はゼロになります。

+ +

構文

+ +
var myDuration = audioOrVideo.duration
+ +

値

+ +

double 型。 メディアデータは利用可能だが長さが不明な場合、この値は NaN です。 メディアがストリーミングされ、事前定義された長さを持たない場合、値は Inf です。

+ +

例

+ +
var obj = document.createElement('video');
+console.log(obj.duration); // NaN
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "#dom-media-duration", "HTMLMediaElement.duration")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.duration")}}{{Spec2('HTML5 W3C')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.duration")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/durationchange_event/index.html b/files/ja/web/api/htmlmediaelement/durationchange_event/index.html new file mode 100644 index 0000000000..f3103b1c6c --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/durationchange_event/index.html @@ -0,0 +1,124 @@ +--- +title: 'HTMLMediaElement: durationchange イベント' +slug: Web/API/HTMLMediaElement/durationchange_event +tags: + - Audio + - HTMLMediaElement + - Reference + - Video + - events +translation_of: Web/API/HTMLMediaElement/durationchange_event +--- +

{{APIRef("HTMLMediaElement")}}

+ +

durationchange イベントは、duration 属性が更新されたときに発生します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{DOMxRef("Event")}}
対象要素
既定のアクションなし
イベントハンドラプロパティ{{domxref("GlobalEventHandlers.ondurationchange")}}
仕様HTML5 メディア
+ +

例

+ +

これらの例では、HTMLMediaElement の durationchange イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。

+ +

AddEventListener() を使用する場合

+ +
const video = document.querySelector('video');
+
+video.addEventListener('durationchange', (event) => {
+  console.log('理由はわかりませんが、動画の再生時間が変わりました。');
+});
+ +

ondurationchange イベントハンドラプロパティを使用する場合

+ +
const video = document.querySelector('video');
+
+video.ondurationchange = (event) => {
+  console.log('理由はわかりませんが、動画の再生時間が変わりました。');
+};
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態
{{SpecName('HTML WHATWG', "media.html#event-media-durationchange", "durationchange media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-durationchange", "durationchange media event")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.durationchange_event")}}

+ + + + + +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/emptied_event/index.html b/files/ja/web/api/htmlmediaelement/emptied_event/index.html new file mode 100644 index 0000000000..109bd9d172 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/emptied_event/index.html @@ -0,0 +1,124 @@ +--- +title: 'HTMLMediaElement: emptied イベント' +slug: Web/API/HTMLMediaElement/emptied_event +tags: + - Audio + - HTMLMediaElement + - Reference + - Video + - events +translation_of: Web/API/HTMLMediaElement/emptied_event +--- +

{{APIRef("HTMLMediaElement")}}

+ +

emptied イベントは、メディアが空になると発生します。 例えば、このイベントは、メディアがすでに読み込まれている（または部分的に読み込まれている）状態で、それを再読み込みするために load() メソッドを呼び出した場合に送信されます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{DOMxRef("Event")}}
対象要素
既定のアクションなし
イベントハンドラプロパティ{{domxref("GlobalEventHandlers.onemptied")}}
仕様HTML5 メディア
+ +

例

+ +

これらの例では、HTMLMediaElement の emptied イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。

+ +

AddEventListener() を使用する場合

+ +
const video = document.querySelector('video');
+
+video.addEventListener('emptied', (event) => {
+  console.log('ええとああ。 メディアが空です。 load() を呼び出しましたか？');
+});
+ +

onemptied イベントハンドラプロパティを使用する場合

+ +
const video = document.querySelector('video');
+
+video.onemptied = (event) => {
+  console.log('ええとああ。 メディアが空です。 load() を呼び出しましたか？');
+};
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態
{{SpecName('HTML WHATWG', "media.html#event-media-emptied", "emptied media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-emptied", "emptied media event")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.emptied_event")}}

+ + + + + +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/ended/index.html b/files/ja/web/api/htmlmediaelement/ended/index.html new file mode 100644 index 0000000000..faab0d4526 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/ended/index.html @@ -0,0 +1,68 @@ +--- +title: HTMLMediaElement.ended +slug: Web/API/HTMLMediaElement/ended +tags: + - API + - HTML DOM + - HTMLMediaElement + - Property + - Read-only + - Web + - ended +translation_of: Web/API/HTMLMediaElement/ended +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLMediaElement.ended は、メディア要素が再生を終了したかどうかを示します。

+ +

構文

+ +
var isEnded = HTMLMediaElement.ended
+ +

値

+ +

要素に含まれるメディアの再生が終了した場合に true となる {{jsxref("Boolean")}}。

+ +

メディアのソースが {{domxref("MediaStream")}} の場合、ストリームの {{domxref("MediaStream.active", "active")}} プロパティの値が false の場合、この値は true です。

+ +

例

+ +
var obj = document.createElement('video');
+console.log(obj.ended); // false
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "#dom-media-ended", "HTMLMediaElement.ended")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.ended")}}{{Spec2('HTML5 W3C')}} 
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.ended")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/ended_event/index.html b/files/ja/web/api/htmlmediaelement/ended_event/index.html new file mode 100644 index 0000000000..81dbde240d --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/ended_event/index.html @@ -0,0 +1,148 @@ +--- +title: 'HTMLMediaElement: ended イベント' +slug: Web/API/HTMLMediaElement/ended_event +tags: + - Audio + - HTML DOM + - HTMLMediaElement + - Media + - Media Streams API + - Reference + - Video + - Web Audio API + - ended + - events +translation_of: Web/API/HTMLMediaElement/ended_event +--- +

{{APIRef("HTMLMediaElement")}}

+ +

ended イベントは、メディアの終わりに達したため、またはそれ以上利用できるデータがないために再生またはストリーミングが停止したときに発生します。 このイベントは、メディアの再生がメディアの最後に到達して終了した {{domxref("HTMLMediaElement")}}（{{HTMLElement("audio")}} および {{HTMLElement("video")}}）に基づいて発生します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{DOMxRef("Event")}}
対象要素
既定のアクションなし
イベントハンドラプロパティ{{domxref("GlobalEventHandlers.onended")}}
仕様HTML5 メディア
+ + + +
+

このイベントは、Media Capture and Streams API および Web Audio API でも定義されています。

+
+ +

例

+ +

これらの例では、HTMLMediaElement の ended イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。

+ +

AddEventListener() を使用する場合

+ +
const video = document.querySelector('video');
+
+video.addEventListener('ended', (event) => {
+  console.log('1）動画が終了した、または 2）それ以上データがない' +
+      'ため、動画が停止しました。');
+});
+ +

onended イベントハンドラプロパティを使用する場合

+ +
const video = document.querySelector('video');
+
+video.onended = (event) => {
+  console.log('1）動画が終了した、または 2）それ以上データがない' +
+      'ため、動画が停止しました。');
+};
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態
{{SpecName('HTML WHATWG', "media.html#event-media-ended", "ended media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-ended", "ended media event")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.ended_event")}}

+ + + + + +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/error/index.html b/files/ja/web/api/htmlmediaelement/error/index.html new file mode 100644 index 0000000000..5bd6175808 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/error/index.html @@ -0,0 +1,73 @@ +--- +title: HTMLMediaElement.error +slug: Web/API/HTMLMediaElement/error +tags: + - API + - Audio + - HTML DOM + - HTMLMediaElement + - Media + - Property + - Read-only + - Reference + - Video + - Web +translation_of: Web/API/HTMLMediaElement/error +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLMediaElement.error は最新のエラーの {{domxref("MediaError")}} オブジェクトです。 エラーが発生していない場合は null です。 要素が {{event("error")}} イベントを受け取ったら、このオブジェクトを調べることによって何が起こったのかについての詳細を決定することができます。

+ +

構文

+ +
var myError = HTMLMediaElement.error;
+ +

値

+ +

メディア要素で発生した最新のエラーを説明する {{domxref("MediaError")}} オブジェクト。 エラーが発生していない場合は null。

+ +

例

+ +

この例では動画要素を設けて、それにエラーハンドラを追加しています。 エラーハンドラは単に詳細をコンソールに記録します。

+ +
var videoElement = document.createElement('video');
+videoElement.onerror = function() {
+  console.log("Error " + videoElement.error.code + "; details: " + videoElement.error.message);
+}
+videoElement.src = "https://example.com/bogusvideo.mp4";
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "#dom-media-error", "HTMLMediaElement.error")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.error")}}{{Spec2('HTML5 W3C')}} 
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.error")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/error_event/index.html b/files/ja/web/api/htmlmediaelement/error_event/index.html new file mode 100644 index 0000000000..ec1145f4e8 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/error_event/index.html @@ -0,0 +1,88 @@ +--- +title: 'HTMLMediaElement: error イベント' +slug: Web/API/HTMLMediaElement/error_event +tags: + - API + - Error + - Event + - HTMLMediaElement + - Reference + - Web + - イベント +translation_of: Web/API/HTMLMediaElement/error_event +--- +
{{APIRef}}
+ +

error イベントは、リソースがエラーのために読み込めなかったときに発生します (例えば、ネットワーク接続の問題など)。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onerror", "onerror")}}
+ +

例

+ +
const video = document.querySelector('video');
+const videoSrc = 'https://path/to/video.webm';
+
+video.addEventListener('error', () => {
+  console.error(`Error loading: ${videoSrc}`);
+});
+
+const source = document.createElement('source');
+source.setAttribute('src', videoSrc);
+source.setAttribute('type', 'video/webm');
+
+video.appendChild(source);
+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('HTML WHATWG', "media.html#event-media-error")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-error")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.HTMLMediaElement.error_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/index.html b/files/ja/web/api/htmlmediaelement/index.html new file mode 100644 index 0000000000..4ce0cfae7c --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/index.html @@ -0,0 +1,293 @@ +--- +title: HTMLMediaElement +slug: Web/API/HTMLMediaElement +tags: + - API + - DOM + - HTML + - HTMLMediaElement + - Interface + - Media + - NeedsNewLayout + - Reference + - インターフェイス +translation_of: Web/API/HTMLMediaElement +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLMediaElement インターフェイスは、 {{domxref("HTMLElement")}} に音声や動画で一般的なメディアに関する基本的な能力の対応に必要なプロパティやメソッドを追加します。 {{domxref("HTMLVideoElement")}} および {{domxref("HTMLAudioElement")}} 要素はどちらも、このインターフェイスを継承しています。

+ +

{{InheritanceDiagram(600, 120)}}

+ +

プロパティ

+ +

このインターフェイスは祖先である {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}}, {{domxref("EventTarget")}} のプロパティを継承しています。

+ +
+
{{domxref("HTMLMediaElement.audioTracks")}}
+
{{domxref("AudioTrackList")}} で、この要素に含まれる {{domxref("AudioTrack")}} オブジェクトを列挙します。
+
{{domxref("HTMLMediaElement.autoplay")}}
+
{{jsxref("Boolean")}} で、 HTML の {{htmlattrxref("autoplay", "video")}} 属性の値を反映し、再生に十分なデータが揃った時点で自動的に再生を始めるかどうかを示します。 +
メモ: オーディオ（またはオーディオトラックを含むビデオ）を自動的に再生するサイトは、ユーザーにとって不快なエクスペリエンスになる可能性があるため、可能な限り避ける必要があります。 自動再生機能を実装する必要がある場合、オプトイン（ユーザーに明示的に有効にすること）する必要があります。 ただし、ソースが後でユーザー制御下で実行されるメディア要素をプレ作成する場合、これは便利です。
+
+
{{domxref("HTMLMediaElement.buffered")}} {{readonlyinline}}
+
その時点でブラウザがバッファしたメディアデータの範囲を表す {{domxref("TimeRanges")}} オブジェクトを取得できます。
+
{{domxref("HTMLMediaElement.controller")}}
+
要素に割り当てられた {{domxref("MediaController")}} オブジェクトを参照できます。割り当てられていない場合の値は null です。
+
{{domxref("HTMLMediaElement.controls")}}
+
再生をコントロールするユーザインタフェースの表示 / 非表示を指定する{{htmlattrxref("controls", "video")}}  属性を、{{jsxref('Boolean')}} で参照できます。
+
{{domxref("HTMLMediaElement.controlsList")}} {{readonlyinline}}
+
ユーザーエージェントが独自のコントロールセットを表示するたびに、メディア要素に表示するコントロールをユーザーエージェントが選択するのに役立つ{{domxref("DOMTokenList")}}を返します。 DOMTokenListは、nodownload、nofullscreen、noremoteplaybackの3つの値のうち1つ以上を取ります。
+
{{domxref("HTMLMediaElement.crossOrigin")}}
+
このメディア要素の CORS 設定 を {{domxref("DOMString")}} で参照できます。
+
{{domxref("HTMLMediaElement.currentSrc")}}{{readonlyinline}}
+
選択されたメディアリソースの絶対 URL を {{domxref("DOMString")}} で返します。
+
{{domxref("HTMLMediaElement.currentTime")}}
+
現在の再生時間を double で返します。値を代入することで、シークを行えます。
+
{{domxref("HTMLMediaElement.defaultMuted")}}
+
標準状態で音声がミュートされているか、いないかを表す、HTML の {{htmlattrxref("muted", "video")}} 属性を {{jsxref('Boolean')}} で参照できます。
+
{{domxref("HTMLMediaElement.defaultPlaybackRate")}}
+
標準の再生レートを double で返します。
+
{{domxref("HTMLMediaElement.disableRemotePlayback")}}
+
リモート再生ができるかどうかを{{jsxref('Boolean')}}で取得できます。メディア要素にリモート再生UIを許可するかどうかを返します。
+
{{domxref("HTMLMediaElement.duration")}}{{readonlyinline}}
+
メディアの長さを秒数で表した数値を double で取得できます。メディアデータがない場合は、0 を返します。
+
{{domxref("HTMLMediaElement.ended")}}{{readonlyinline}}
+
再生が終了しているか、いないかを {{jsxref('Boolean')}} で取得できます。
+
{{domxref("HTMLMediaElement.error")}}{{readonlyinline}}
+
一番最後に起きたエラーを {{domxref("MediaError")}} オブジェクトとして返します。エラーが起きていない場合は null を返します。
+
{{domxref("HTMLMediaElement.loop")}}
+
繰り返し再生を有効、無効を表す HTML の {{htmlattrxref("loop", "video")}} を{{jsxref('Boolean')}} として参照できます。
+
{{domxref("HTMLMediaElement.mediaGroup")}}
+
Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("mediagroup", "video")}} HTML attribute, which indicates the name of the group of elements it belongs to. A group of media elements shares a common {{domxref('MediaController')}}.
+
{{domxref("HTMLMediaElement.mediaKeys")}} {{readonlyinline}} {{experimental_inline}}
+
Returns a {{domxref("MediaKeys")}} object or null. MediaKeys is a set of keys that an associated HTMLMediaElement can use for decryption of media data during playback.
+
{{domxref("HTMLMediaElement.mozAudioCaptured")}} {{readonlyinline}} {{non-standard_inline}}
+
Returns a {{jsxref('Boolean')}}. Related to audio stream capture.
+
{{domxref("HTMLMediaElement.mozFragmentEnd")}} {{non-standard_inline}}
+
Is a double that provides access to the fragment end time if the media element has a fragment URI for currentSrc, otherwise it is equal to the media duration.
+
{{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}}
+
+

Is a unsigned long that indicates the number of samples that will be returned in the framebuffer of each MozAudioAvailable event. This number is a total for all channels, and by default is set to be the number of channels * 1024 (e.g., 2 channels * 1024 samples = 2048 total).

+ +

The mozFrameBufferLength property can be set to a new value for lower latency, larger amounts of data, etc. The size given must be a number between 512 and 16384. Using any other size results in an exception being thrown. The best time to set a new length is after the loadedmetadata event fires, when the audio info is known, but before the audio has started or MozAudioAvailable events have begun firing.

+
+
{{domxref("HTMLMediaElement.mozSampleRate")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}
+
Returns a double representing the number of samples per second that will be played. For example, 44100 samples per second is the sample rate used by CD audio.
+
{{domxref("HTMLMediaElement.muted")}}
+
Is a {{jsxref('Boolean')}} that determines whether audio is muted. true if the audio is muted and false otherwise.
+
{{domxref("HTMLMediaElement.networkState")}} {{readonlyinline}}
+
Returns a unsigned short (enumeration) indicating the current state of fetching the media over the network.
+
{{domxref("HTMLMediaElement.paused")}} {{readonlyinline}}
+
Returns a {{jsxref('Boolean')}} that indicates whether the media element is paused.
+
{{domxref("HTMLMediaElement.playbackRate")}}
+
Is a double that indicates the rate at which the media is being played back.
+
{{domxref("HTMLMediaElement.played")}} {{readonlyinline}}
+
Returns a {{domxref('TimeRanges')}} object that contains the ranges of the media source that the browser has played, if any.
+
{{domxref("HTMLMediaElement.preload")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("preload", "video")}} HTML attribute, indicating what data should be preloaded, if any. Possible values are: none, metadata, auto.
+
{{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}}
+
Is a {{jsxref('Boolean')}} that determines if the pitch of the sound will be preserved. If set to false, the pitch will adjust to the speed of the audio. This is implemented with prefixes in Firefox (mozPreservesPitch) and WebKit (webkitPreservesPitch).
+
{{domxref("HTMLMediaElement.readyState")}} {{readonlyinline}}
+
Returns a unsigned short (enumeration) indicating the readiness state of the media.
+
{{domxref("HTMLMediaElement.seekable")}} {{readonlyinline}}
+
Returns a {{domxref('TimeRanges')}} object that contains the time ranges that the user is able to seek to, if any.
+
{{domxref("HTMLMediaElement.seeking")}} {{readonlyinline}}
+
Returns a {{jsxref('Boolean')}} that indicates whether the media is in the process of seeking to a new position.
+
{{domxref("HTMLMediaElement.sinkId")}} {{readonlyinline}} {{experimental_inline}}
+
Returns a {{domxref("DOMString")}} that is the unique ID of the audio device delivering output, or an empty string if it is using the user agent default. This ID should be one of the MediaDeviceInfo.deviceid values returned from {{domxref("MediaDevices.enumerateDevices()")}}, id-multimedia, or id-communications.
+
{{domxref("HTMLMediaElement.src")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "video")}} HTML attribute, which contains the URL of a media resource to use.
+
{{domxref("HTMLMediaElement.srcObject")}}
+
Is a {{domxref('MediaStream')}} representing the media to play or that has played in the current HTMLMediaElement, or null if not assigned.
+
{{domxref("HTMLMediaElement.textTracks")}} {{readonlyinline}}
+
Returns the list of {{domxref("TextTrack")}} objects contained in the element.
+
{{domxref("HTMLMediaElement.videoTracks")}} {{readonlyinline}}
+
要素の持つ {{domxref("VideoTrack")}} オブジェクトのリストを参照できます。 +
+

Gecko は 1 トラックの再生のみをサポートします。また複数トラックのメタデータ解析は、 Ogg フォーマットの場合にのみ有効です。

+
+
+
{{domxref("HTMLMediaElement.volume")}}
+
音量を double で取得できます。この値は 0.0 (無音) 以上、1.0 (最大) 以下でなくてはなりません。
+
+ +

イベントハンドラー

+ +
+
{{domxref("HTMLMediaElement.onencrypted")}}
+
メディアが暗号化されている場合に呼ばれる {{domxref('EventHandler')}} を設定できます。
+
{{domxref("HTMLMediaElement.onwaitingforkey")}}
+
Sets the {{domxref('EventHandler')}} called when playback is blocked while waiting for an encryption key.
+
+ +

廃止された属性

+ +

These attributes are obsolete and should not be used, even if a browser still supports them.

+ +
+
{{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{obsolete_inline}}
+
double で、初期再生位置を示す値を秒単位で返します。
+
{{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}
+
Returns a double representing the number of channels in the audio resource (e.g., 2 for stereo).
+
+ +

廃止されたイベントハンドラー

+ +
+
{{domxref("HTMLMediaElement.onmozinterruptbegin")}} {{non-standard_inline}} {{obsolete_inline}}
+
オーディオチャンネルマネージャによってメディア要素が割り込まれたときに呼び出される {{domxref("EventHandler")}} を設定します。これは Firefox 固有のもので、 Firefox OS のために実装されていましたが、 Firefox 55 で削除されました。
+
{{domxref("HTMLMediaElement.onmozinterruptend")}} {{non-standard_inline}} {{obsolete_inline}}
+
割り込みが完了したときに呼び出される {{domxref('EventHandler')}} を設定します。これは Firefox 固有のもので、 Firefox OS のために実装されていましたが、 Firefox 55 で削除されました。
+
+ +

メソッド

+ +

このインターフェイスは祖先である {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}}, {{domxref("EventTarget")}} のメソッドを継承しています。

+ +
+
{{domxref("HTMLMediaElement.addTextTrack()")}}
+
字幕向けトラックのような、テキストトラックを追加します。
+
{{domxref("HTMLMediaElement.captureStream()")}} {{experimental_inline}}
+
Returns {{domxref("MediaStream")}}, captures a stream of the media content.
+
{{domxref("HTMLMediaElement.canPlayType()")}}
+
メディアタイプが再生可能かどうかを判定します。
+
{{domxref("HTMLMediaElement.fastSeek()")}}
+
指定された時間へシークします。
+
{{domxref("HTMLMediaElement.load()")}}
+
メディア要素をリセットし、メディアリソースをリスタートします。処理されなかったイベントは破棄されます。メディアデータがダウンロードされる量は preload 属性の値に影響されます。src 属性の値、もしくは source 要素内の要素を削除した際のリソース解放、もしくは source の子要素が動的に変更される場合の再スキャンのために利用します。それ以外の場合に呼びだす必要はありません。
+
{{domxref("HTMLMediaElement.mozCaptureStream()")}} {{non-standard_inline}}
+
[enter description]
+
{{domxref("HTMLMediaElement.mozCaptureStreamUntilEnded()")}} {{non-standard_inline}}
+
[enter description]
+
{{domxref("HTMLMediaElement.mozGetMetadata()")}} {{non-standard_inline}}
+
再生中のメディアデータに対するメタデータを {{jsxref('Object')}} として返します。呼び出すたびに、オブジェクトのコピーが新しく作られます。このメソッドを呼び出すには、loadedmetadata イベント発火している必要があります。
+
{{domxref("HTMLMediaElement.pause()")}}
+
再生を一時停止します。
+
{{domxref("HTMLMediaElement.play()")}}
+
再生を開始します。
+
{{domxref("HTMLMediaElement.seekToNextFrame()")}} {{non-standard_inline}} {{experimental_inline}}
+
Seeks to the next frame in the media. This non-standard, experimental method makes it possible to manually drive reading and rendering of media at a custom speed, or to move through the media frame-by-frame to perform filtering or other operations.
+
{{domxref("HTMLMediaElement.setMediaKeys()")}} {{experimental_inline}}
+
再生に利用する{{domxref("MediaKeys")}} を指定します。{{jsxref("Promise")}} オブジェクトを返します。
+
{{domxref("HTMLMediaElement.setSinkId()")}} {{experimental_inline}}
+
音声出力をレンダリングするデバイスの ID を指定できます。指定はアプリケーションからの利用が許されている場合に有効です。なお返り値は {{jsxref("Promise")}} オブジェクトとなっています。
+
+ +

廃止されたメソッド

+ +

These methods are obsolete and should not be used, even if a browser still supports them.

+ +
+
{{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}}
+
このメソッドは Mozilla の独自実装で、他のメディア要素からデータをロードします。通常のリソース選択のアルゴリズムではなく、他の要素の currentSrc を選ぶ点以外は、 load() メソッドと同じように振る舞います。これは他の要素がキャッシュし、バッファしているデータを利用することにより最適化を図るためです。実際に、2 つの要素が同じダウンロードデータを利用する場合、どちらか一方のダウンロードが終われば、他方でもそのデータを利用できるようになります。
+
+ +

イベント

+ +

Inherits methods from its parent, {{domxref("HTMLElement")}} , defined in the {{domxref('GlobalEventHandlers')}} mixin. Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

+ +
+
{{domxref("HTMLMediaElement.abort_event", 'abort')}}
+
Fired when the resource was not fully loaded, but not as the result of an error.
+
{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}
+
Fired when the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content
+
{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}
+
Fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
+
{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}
+
Fired when the duration attribute has been updated.
+
{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}
+
Fired when the media has become empty; for example, when the media has already been loaded (or partially loaded), and the {{domxref("HTMLMediaElement.load()")}} method is called to reload it.
+
{{domxref("HTMLMediaElement.ended_event", 'ended')}}
+
Fired when playback stops when end of the media (<audio> or <video>) is reached or because no further data is available.
+
{{domxref("HTMLMediaElement.error_event", 'error')}}
+
Fired when the resource could not be loaded due to an error.
+
{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}
+
Fired when the first frame of the media has finished loading.
+
{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}
+
Fired when the metadata has been loaded
+
{{domxref("HTMLMediaElement.loadstart_event", 'loadstart')}}
+
Fired when the browser has started to load a resource.
+
{{domxref("HTMLMediaElement.pause_event", 'pause')}}
+
Fired when a request to pause play is handled and the activity has entered its paused state, most commonly occurring when the media's {{domxref("HTMLMediaElement.pause()")}} method is called.
+
{{domxref("HTMLMediaElement.play_event", 'play')}}
+
Fired when when the paused property is changed from true to false, as a result of the {{domxref("HTMLMediaElement.play()")}} method, or the autoplay attribute
+
{{domxref("HTMLMediaElement.playing_event", "playing")}}
+
Fired when playback is ready to start after having been paused or delayed due to lack of data
+
{{domxref("HTMLMediaElement.progress_event", "progress")}}
+
Fired periodically as the browser loads a resource.
+
{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}
+
Fired when the playback rate has changed.
+
{{domxref("HTMLMediaElement.seeked_event", 'seeked ')}}
+
Fired when a seek operation completes
+
{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}
+
Fired when a seek operation begins
+
{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}
+
Fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
+
{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}
+
Fired when the media data loading has been suspended.
+
{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}
+
Fired when the time indicated by the currentTime attribute has been updated
+
{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}
+
Fired when the volume has changed.
+
{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}
+
Fired when playback has stopped because of a temporary lack of data
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Media Capture','#htmlmediaelement-extensions','HTMLMediaElement')}}{{Spec2('Media Capture')}}Adds sinkId and setSinkId(), and captureStream().
{{SpecName('EME', '#introduction', 'Encrypted Media Extensions')}}{{Spec2('EME')}}Adds {{domxref("MediaKeys")}}, {{domxref("MediaEncryptedEvent")}}, {{domxref("setMediaKeys")}}, {{domxref("onencrypted")}}, and {{domxref("onwaitingforkey")}}.
{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement")}}{{Spec2('HTML WHATWG')}}{{SpecName('HTML5 W3C')}} からの変更なし
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement")}}{{Spec2('HTML5 W3C')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("api.HTMLMediaElement")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/load/index.html b/files/ja/web/api/htmlmediaelement/load/index.html new file mode 100644 index 0000000000..f26389911d --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/load/index.html @@ -0,0 +1,86 @@ +--- +title: HTMLMediaElement.load() +slug: Web/API/HTMLMediaElement/load +tags: + - API + - Audio + - Element + - HTML DOM + - HTMLMediaElement + - Media + - Method + - Reference + - Video + - load + - reset +translation_of: Web/API/HTMLMediaElement/load +--- +
{{APIRef("HTML DOM")}}
+ +

{{domxref("HTMLMediaElement")}} の load() メソッドは、メディア要素をその初期状態にリセットし、再生を開始する準備としてメディアソースを選択してメディアを読み込むプロセスを開始します。 プリフェッチされるメディアデータの量は、要素の {{htmlattrxref("preload", "video")}} 属性の値によって決まります。

+ +

このメソッドは通常、要素の {{htmlattrxref("src", "video")}} 属性を変更するか、メディア要素自体の中にネストされている {{HTMLElement("source")}} 要素を追加または削除することによって、メディア要素に使用可能な一連のソースを動的に変更した場合にのみ役立ちます。 load() は要素をリセットして利用可能なソースを再スキャンし、それによって変更を有効にします。

+ +

構文

+ +
mediaElement.load();
+ +

パラメーター

+ +

無し。

+ +

戻り値

+ +

undefined。

+ +

使用上の注意

+ +

load() を呼び出すと、このメディア要素を含む進行中のすべての操作が中止され、{{HTMLElement("audio")}} 要素または {{HTMLElement("video")}} 要素で指定されたオプションとその {{htmlattrxref("src", "video")}} 属性または子の {{HTMLElement("source")}} 要素を指定して適切なメディアリソースの選択と読み込みのプロセスが開始されます。 これについては、動画と音声のコンテンツの複数フォーマットのサポートで詳しく説明しています。

+ +

進行中のアクティビティを中止するプロセスにより、{{domxref("HTMLMediaElement.play", "play()")}} によって返された未処理の {{jsxref("Promise")}} が、新しいメディアの読み込みが開始される前に、そのステータスに基づいて適切に解決または拒否されます。 保留中の play の promises は "AbortError" {{domxref("DOMException")}} で中止されます。

+ +

読み込みプロセスが進むにつれて、次のように適切なイベントがメディア要素自体に送信されます。

+ + + +

例

+ +

この例では、ドキュメント内の {{HTMLElement("video")}} 要素を見つけて、load() を呼び出してそれをリセットします。

+ +
var mediaElem = document.querySelector("video");
+mediaElem.load();
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "media.html#dom-media-load", "HTMLMediaElement.load()")}}{{Spec2('HTML WHATWG')}}初期定義
{{SpecName('HTML5 W3C', "semantics-embedded-content.html#dom-htmlmediaelement-load", "HTMLMediaElement.load()")}}{{Spec2('HTML5 W3C')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.load")}}

diff --git a/files/ja/web/api/htmlmediaelement/loadeddata_event/index.html b/files/ja/web/api/htmlmediaelement/loadeddata_event/index.html new file mode 100644 index 0000000000..93e7457d83 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/loadeddata_event/index.html @@ -0,0 +1,136 @@ +--- +title: 'HTMLMediaElement: loadeddata イベント' +slug: Web/API/HTMLMediaElement/loadeddata_event +tags: + - Audio + - Event + - HTMLMediaElement + - Reference + - Video + - loadeddata + - イベント + - 動画 + - 音声 +translation_of: Web/API/HTMLMediaElement/loadeddata_event +--- +
{{APIRef("HTMLMediaElement")}}
+ +

loadeddata イベントは、メディアの現在の再生位置のフレームの読み込みが完了したときに発生します。ふつうは最初のフレームです。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{DOMxRef("Event")}}
対象Element
既定のアクションなし
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onloadeddata")}}
仕様書HTML5 media
+ +
+

なお、このイベントはモバイルやタブレットにおいて、ブラウザーの設定でデータセーバーがオンになっていると発生しません。

+
+ +

例

+ +

これらの例では、 HTMLMediaElement の loadeddata イベントにイベントリスナーを追加し、イベントが発生してイベントハンドラーが動作したときにメッセージを投稿します。

+ +

addEventListener() の使用:

+ +
const video = document.querySelector('video');
+
+video.addEventListener('loadeddata', (event) => {
+  console.log('Yay! The readyState just increased to  ' +
+      'HAVE_CURRENT_DATA or greater for the first time.');
+});
+ +

onloadeddata イベントハンドラープロパティの使用:

+ +
const video = document.querySelector('video');
+
+video.onloadeddata = (event) => {
+  console.log('Yay! The readyState just increased to  ' +
+      'HAVE_CURRENT_DATA or greater for the first time.');
+};
+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('HTML WHATWG', "media.html#event-media-loadeddata", "loadeddata media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-loadeddata", "loadeddata media event")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.loadeddata_event")}}

+ + + + + +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/loadedmetadata_event/index.html b/files/ja/web/api/htmlmediaelement/loadedmetadata_event/index.html new file mode 100644 index 0000000000..f5fbcf345d --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/loadedmetadata_event/index.html @@ -0,0 +1,159 @@ +--- +title: 'HTMLMediaElement: loadedmetadata イベント' +slug: Web/API/HTMLMediaElement/loadedmetadata_event +tags: + - Audio + - HTMLMediaElement + - Reference + - Video + - events +translation_of: Web/API/HTMLMediaElement/loadedmetadata_event +--- +

{{APIRef("HTMLMediaElement")}}

+ +

loadedmetadata イベントは、メタデータが読み込まれたときに発生します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{DOMxRef("Event")}}
対象Element
Default Action要素
イベントハンドラプロパティ{{domxref("GlobalEventHandlers.onloadedmetadata")}}
仕様HTML5 メディア
+ +

追加のプロパティ

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
プロパティ型説明
mozChannels {{readonlyInline}}intチャンネル数。
mozSampleRate {{readonlyInline}}int1秒あたりのサンプルレート。
mozFrameBufferLength {{readonlyInline}}intすべてのチャンネルで収集されたサンプルの数。
+ +

例

+ +

これらの例では、HTMLMediaElement の loadedmetadata イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。

+ +

AddEventListener() を使用する場合

+ +
const video = document.querySelector('video');
+
+video.addEventListener('loadedmetadata', (event) => {
+  console.log('メディアとトラックの' + '
+      長さと寸法は現在わかっています。');
+});
+ +

onloadedmetadata イベントハンドラプロパティを使用する場合

+ +
const video = document.querySelector('video');
+
+video.onloadedmetadata = (event) => {
+  console.log('メディアとトラックの' + '
+      長さと寸法は現在わかっています。');
+};
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態
{{SpecName('HTML WHATWG', "media.html#event-media-loadedmetadata", "loadedmetadata media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-loadedmetadata", "loadedmetadata media event")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.loadedmetadata_event")}}

+ + + + + +

関連情報

+ + + + diff --git a/files/ja/web/api/htmlmediaelement/loadstart_event/index.html b/files/ja/web/api/htmlmediaelement/loadstart_event/index.html new file mode 100644 index 0000000000..8f7944a222 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/loadstart_event/index.html @@ -0,0 +1,163 @@ +--- +title: 'HTMLMediaElement: loadstart イベント' +slug: Web/API/HTMLMediaElement/loadstart_event +tags: + - API + - Event + - HTMLMediaElement + - Reference + - Web + - loadstart + - イベント +translation_of: Web/API/HTMLMediaElement/loadstart_event +--- +
{{APIRef}}
+ +

loadstart イベントは、ブラウザーがリソースの読み込みを開始したときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onloadstart", "onloadstart")}}
+ +

例

+ +

ライブデモ

+ +

HTML

+ +
<div class="example">
+
+    <button type="button">Load video</button>
+    <video controls width="250"></video>
+
+    <div class="event-log">
+        <label>Event log:</label>
+        <textarea readonly class="event-log-contents"></textarea>
+    </div>
+
+</div>
+ + + +

JS

+ +
const loadVideo = document.querySelector('button');
+const video = document.querySelector('video');
+const eventLog = document.querySelector('.event-log-contents');
+let source = null;
+
+function handleEvent(event) {
+    eventLog.textContent = eventLog.textContent + `${event.type}\n`;
+}
+
+video.addEventListener('loadstart', handleEvent);
+video.addEventListener('progress', handleEvent);
+video.addEventListener('canplay', handleEvent);
+video.addEventListener('canplaythrough', handleEvent);
+
+loadVideo.addEventListener('click', () => {
+
+    if (source) {
+        document.location.reload();
+    } else {
+        loadVideo.textContent = "Reset example";
+        source = document.createElement('source');
+        source.setAttribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm');
+        source.setAttribute('type', 'video/webm');
+
+        video.appendChild(source);
+    }
+});
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '200px') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('HTML WHATWG', "media.html#event-media-loadstart", "loadstart media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-loadstart", "loadstart media event")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.HTMLMediaElement.loadstart_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/loop/index.html b/files/ja/web/api/htmlmediaelement/loop/index.html new file mode 100644 index 0000000000..49ddc0af23 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/loop/index.html @@ -0,0 +1,64 @@ +--- +title: HTMLMediaElement.loop +slug: Web/API/HTMLMediaElement/loop +tags: + - API + - HTML DOM + - HTMLMediaElement + - Property + - Web +translation_of: Web/API/HTMLMediaElement/loop +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLMediaElement.loop プロパティは、{{htmlattrxref("loop", "video")}} HTML 属性を反映します。 これは、メディア要素が最後に到達したときに最初からやり直すかどうかを制御します。

+ +

構文

+ +
var loop = video.loop;
+audio.loop = true;
+
+ +

値

+ +

{{jsxref("Boolean")}}。

+ +

例

+ +
var obj = document.createElement('video');
+obj.loop = true; // true
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "#dom-media-loop", "HTMLMediaElement.loop")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.loop")}}{{Spec2('HTML5 W3C')}} 
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.loop")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/mediagroup/index.html b/files/ja/web/api/htmlmediaelement/mediagroup/index.html new file mode 100644 index 0000000000..53171f3b7b --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/mediagroup/index.html @@ -0,0 +1,56 @@ +--- +title: HTMLMediaElement.mediaGroup +slug: Web/API/HTMLMediaElement/mediaGroup +tags: + - API + - HTML DOM + - HTMLMediaElement + - Property + - Web +translation_of: Web/API/HTMLMediaElement/mediaGroup +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLMediaElement.mediaGroup プロパティは、{{htmlattrxref("mediaGroup", "video")}} HTML 属性を反映します。 これは、それが属する要素のグループの名前を示します。 メディア要素のグループは、共通の controller を共有します。

+ +

構文

+ +
...
+ +

値

+ +

{{domxref("DOMString")}}。

+ +

例

+ +
...
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.mediaGroup")}}{{Spec2('HTML5 W3C')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.mediaGroup")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/muted/index.html b/files/ja/web/api/htmlmediaelement/muted/index.html new file mode 100644 index 0000000000..9a55a4fb8f --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/muted/index.html @@ -0,0 +1,65 @@ +--- +title: HTMLMediaElement.muted +slug: Web/API/HTMLMediaElement/muted +tags: + - API + - HTML DOM + - HTMLMediaElement + - Property + - Web +translation_of: Web/API/HTMLMediaElement/muted +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLMediaElement.muted は、メディア要素がミュートしているかどうかを示します。

+ +

構文

+ +
var isMuted = audioOrVideo.muted
+audio.muted = true;
+ +

値

+ +

{{jsxref("Boolean")}}。 true はミュートしていることを意味し、false はミュートしていないことを意味します。

+ +

例

+ +
var obj = document.createElement('video');
+console.log(obj.muted); // false
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "#dom-media-muted", "HTMLMediaElement.muted")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.muted")}}{{Spec2('HTML5 W3C')}} 
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.muted")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/networkstate/index.html b/files/ja/web/api/htmlmediaelement/networkstate/index.html new file mode 100644 index 0000000000..4c6e6bac86 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/networkstate/index.html @@ -0,0 +1,108 @@ +--- +title: HTMLMediaElement.networkState +slug: Web/API/HTMLMediaElement/networkState +tags: + - API + - HTML DOM + - Property + - Read-only + - Web +translation_of: Web/API/HTMLMediaElement/networkState +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLMediaElement.networkState プロパティは、ネットワークを介したメディアの現在の取得状況を示します。

+ +

構文

+ +
var networkState = audioOrVideo.networkState;
+ +

値

+ +

unsigned short 型。 可能な値は次のとおりです。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
定数値説明
NETWORK_EMPTY0まだデータがありません。 また、readyState は HAVE_NOTHING です。
NETWORK_IDLE1HTMLMediaElement はアクティブで、リソースを選択しましたが、ネットワークを使用していません。
NETWORK_LOADING2ブラウザーは HTMLMediaElement のデータをダウンロードしています。
NETWORK_NO_SOURCE3HTMLMediaElement の src が見つかりません。
+ +

例

+ +

この例では、音声要素が再生を開始するのを待機してから、まだデータを読み込んでいるかどうかを確認します。

+ +
<audio id="example" preload="auto">
+ <source src="sound.ogg" type="audio/ogg" />
+</audio>
+
+ +
var obj = document.getElementById('example');
+
+obj.addEventListener('playing', function() {
+
+  if (obj.networkState === 2) {
+    // 読み込み中...
+  }
+
+});
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "#dom-media-networkstate", "HTMLMediaElement.networkState")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.networkState")}}{{Spec2('HTML5 W3C')}} 
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.networkState")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/onerror/index.html b/files/ja/web/api/htmlmediaelement/onerror/index.html new file mode 100644 index 0000000000..ea69d93b8e --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/onerror/index.html @@ -0,0 +1,60 @@ +--- +title: HTMLMediaElement.onerror +slug: Web/API/HTMLMediaElement/onerror +tags: + - API + - Audio + - Errors + - Event Handler + - HTML DOM + - HTMLMediaElement + - Media + - Property + - Reference + - Video + - onerror +translation_of: Web/API/HTMLMediaElement/onerror +--- +
{{APIRef("HTML DOM")}}
+ +

{{domxref("HTMLMediaElement")}} インターフェースの onerror プロパティは、{{event("error")}} イベントを処理するための {{domxref("EventHandler")}} です。

+ +

error イベントは、メディアを読み込んだり実行しようとしたときに何らかのエラーが発生したときに発生します。

+ +

構文

+ +
HTMLMediaElement.onerror = EventListener;
+ +

値

+ +

{{event("error")}} イベントのイベントハンドラとして機能する {{jsxref("function")}}。 エラーが発生すると、指定した関数が呼び出されます。 null の場合、エラーハンドラは無効です。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG','webappapis.html#handler-onerror','onerror')}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.onerror")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/pause/index.html b/files/ja/web/api/htmlmediaelement/pause/index.html new file mode 100644 index 0000000000..cc45472dee --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/pause/index.html @@ -0,0 +1,59 @@ +--- +title: HTMLMediaElement.pause() +slug: Web/API/HTMLMediaElement/pause +tags: + - API + - Audio + - HTMLMediaElement + - Method + - Reference + - Video +translation_of: Web/API/HTMLMediaElement/pause +--- +

{{APIRef("HTML DOM")}}

+ +

HTMLMediaElement.pause() メソッドはメディアの再生を一時停止します。 メディアがすでに一時停止状態にある場合、このメソッドは効果がありません。

+ +

構文

+ +
HTMLMediaElement.pause()
+ +

パラメーター

+ +

無し。

+ +

戻り値

+ +

無し。

+ +

例外

+ +

無し。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-pause', 'pause()')}}{{Spec2('HTML WHATWG')}}初期定義; リビング仕様
{{SpecName('HTML5 W3C','embedded-content-0.html#dom-media-pause','pause()')}}{{Spec2('HTML5 W3C')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.pause")}}

diff --git a/files/ja/web/api/htmlmediaelement/pause_event/index.html b/files/ja/web/api/htmlmediaelement/pause_event/index.html new file mode 100644 index 0000000000..bad57c46ac --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/pause_event/index.html @@ -0,0 +1,142 @@ +--- +title: 'HTMLMediaElement: pause イベント' +slug: Web/API/HTMLMediaElement/pause_event +tags: + - Audio + - Event + - HTML + - HTMLMediaElement + - Media + - Media Events + - Pausing + - Pausing Media + - Pausing Speech + - Speech Events + - Video + - Web Speech API + - Web Speech Events + - events + - pause + - speech +translation_of: Web/API/HTMLMediaElement/pause_event +--- +
{{APIRef("HTMLMediaElement")}}
+ +

pause イベントは、動作の一時停止のリクエストが処理され、動作が一時状態に入ったときに送信されるものであり、メディアが要素の {{domxref("HTMLMediaElement.pause", "pause()")}} の呼び出しを通して一時停止した後が最も一般的です。イベントは pause() メソッドから戻り、メディア要素の {{domxref("HTMLMediaElement.paused", "paused")}} プロパティが true に変化した後で一度送信されます。

+ +

基本情報

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{DOMxRef("Event")}}
対象Element
既定のアクションなし
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onpause")}}
仕様書HTML5 media
+ +

例

+ +

これらの例は、 HTMLMediaElement の pause イベントにイベントリスナーを追加してから、イベントが発生したことでイベントハンドラーが動作したときにメッセージをポストします。

+ +

addEventListener() を使用した例:

+ +
const video = document.querySelector('video');
+
+video.addEventListener('pause', (event) => {
+  console.log('The Boolean paused property is now true. Either the ' +
+  'pause() method was called or the autoplay attribute was toggled.');
+});
+ +

onpause イベントハンドラープロパティを使用した例:

+ +
const video = document.querySelector('video');
+
+video.onpause = (event) => {
+  console.log('The Boolean paused property is now true. Either the ' +
+  'pause() method was called or the autoplay attribute was toggled.');
+};
+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('HTML WHATWG', "media.html#event-media-pause", "pause media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-pause", "pause media event")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.HTMLMediaElement.pause_event")}}

+ + + + + +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/paused/index.html b/files/ja/web/api/htmlmediaelement/paused/index.html new file mode 100644 index 0000000000..3d629d77b8 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/paused/index.html @@ -0,0 +1,62 @@ +--- +title: HTMLMediaElement.paused +slug: Web/API/HTMLMediaElement/paused +tags: + - API + - HTML DOM + - HTMLMediaElement + - Property + - Read-only +translation_of: Web/API/HTMLMediaElement/paused +--- +
{{APIRef("HTML DOM")}}
+ +

読み取り専用の HTMLMediaElement.paused プロパティは、メディア要素を一時停止しているかどうかを示します。

+ +

構文

+ +
var isPaused = audioOrVideo.paused
+ +

値

+ +

{{jsxref("Boolean")}}。 true は一時停止中で、false は一時停止していません。

+ +

例

+ +
var obj = document.createElement('video');
+console.log(obj.paused); // true
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "#dom-media-paused", "HTMLMediaElement.paused")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.paused")}}{{Spec2('HTML5 W3C')}} 
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.paused")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/play/index.html b/files/ja/web/api/htmlmediaelement/play/index.html new file mode 100644 index 0000000000..0cf8007517 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/play/index.html @@ -0,0 +1,134 @@ +--- +title: HTMLMediaElement.play() +slug: Web/API/HTMLMediaElement/play +tags: + - API + - Audio + - HTMLMediaElement + - Interface + - Media + - Method + - Reference + - Video + - play +translation_of: Web/API/HTMLMediaElement/play +--- +
{{APIRef("HTML DOM")}}
+ +

{{domxref("HTMLMediaElement")}} の play() メソッドは、メディアの再生を開始しようとします。 再生が正常に開始されると解決する {{jsxref("Promise")}} を返します。 パーミッションの問題など、何らかの理由で再生を開始しなかった場合、その promise は拒否されます。

+ +

構文

+ +
var promise = HTMLMediaElement.play();
+ +

パラメーター

+ +

無し。

+ +

戻り値

+ +

再生が開始されたときに解決される、または何らかの理由で再生を開始できない場合は拒否される {{jsxref("Promise")}}。

+ +
+

注: 古いブラウザーは play() から値を返さないかもしれません。

+
+ +

例外

+ +

promise の拒否ハンドラ（rejection handler）は、その唯一の入力パラメータとして渡された例外名で呼び出されます（従来の例外がスローされるのとは対照的に）。 考えられるエラーは次のとおりです。

+ +
+
NotAllowedError
+
ユーザーエージェント（ブラウザー）またはオペレーティングシステムは、現在のコンテキストまたはシチュエーションではメディアの再生を許可していません。 これは、例えば、「再生」ボタンをクリックすることによってメディアの再生を明示的に開始することをブラウザーがユーザーに要求する場合に起こり得ます。
+
NotSupportedError
+
メディアソース（{{domxref("MediaStream")}}、{{domxref("MediaSource")}}、{{domxref("Blob")}}、{{domxref("File")}} など）はサポートしているメディア形式を表していません。
+
+ +

ブラウザーの実装の詳細、メディアプレーヤーの実装などによっては、他の例外が報告されることがあります。

+ +

使用上の注意

+ +

「自動再生（autoplay）」という用語は通常、読み込まれるとすぐにメディアの再生を開始するページを指すと考えられていますが、ウェブブラウザーの自動再生ポリシーは、play() の呼び出しを含むスクリプト起動によるメディアの再生にも適用されます。

+ +

{{Glossary("user agent","ユーザーエージェント")}}が自動またはスクリプト起動によるメディアの再生を許可しないように設定されている場合、play() を呼び出すと返された promise が直ちに NotAllowedError で拒否されます。 ウェブサイトはこの状況に対処する準備をしておくべきです。 例えば、サイトには再生が自動的に開始されたことを前提としたユーザーインターフェイスを表示するのではなく、返された promise が解決されたか拒否されたかに基づいて UI を更新する必要があります。 詳しくは、以下の{{anch("Example", "例")}}を参照してください。

+ +
+

注: play() メソッドを使用すると、ユーザーはメディアの再生を許可するように要求され、返された promise が解決されるまでに遅延が生じる可能性があります。 コードが即座の応答を期待していないことを確認してください。

+
+ +

自動再生および自動再生のブロックの詳細については、メディアおよびウェブオーディオ API の自動再生ガイドを参照してください。

+ +

例

+ +

この例では、再生が開始されたことを確認する方法と、ブロックされた自動再生を適切に処理する方法を示します。

+ +
let videoElem = document.getElementById("video");
+let playButton = document.getElementById("playbutton");
+
+playButton.addEventListener("click", handlePlayButton, false);
+playVideo();
+
+async function playVideo() {
+  try {
+    await videoElem.play();
+    playButton.className = "playing";
+  } catch(err) {
+    playButton.className = "";
+  }
+}
+
+function handlePlayButton() {
+  if (videoElem.paused) {
+    playVideo();
+  } else {
+    videoElem.pause();
+    playButton.className = "";
+  }
+}
+ +

この例では、動画の再生は async の playVideo() 関数によってオンとオフを切り替えられます。 動画を再生しようとし、成功した場合は playButton 要素のクラス名を "playing"（再生中）に設定します。 再生が開始されない場合、playButton 要素のクラスはクリアされ、デフォルトの外観に戻ります。 これは、play() によって返された {{jsxref("Promise")}} の解決または拒否を監視することによって、再生ボタンが実際の再生状態と一致することを保証します。

+ +

この例が実行されると、再生のオンとオフを切り替えるために使用する {{HTMLElement("button")}} と同様に {{HTMLElement("video")}} 要素への参照を収集することから始めます。 次に、再生トグルボタンの {{event("click")}} イベントのイベントハンドラを設定し、playVideo() を呼び出して自動的に再生を開始しようとします。

+ +

あなたは Glitch でこの例を試したり、リミックスすることができます。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-play', 'play()')}}{{Spec2('HTML WHATWG')}}初期定義; リビング仕様
{{SpecName('HTML5 W3C','embedded-content-0.html#dom-media-play','play()')}}{{Spec2('HTML5 W3C')}}初期定義
+ +
+

注: WHATWG バージョンと W3C バージョンの仕様は、このメソッドが {{jsxref("Promise")}} を返すか、まったく返さないかについて、それぞれ異なります（2018年8月現在）。

+
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.play")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/play_event/index.html b/files/ja/web/api/htmlmediaelement/play_event/index.html new file mode 100644 index 0000000000..65ddcc515d --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/play_event/index.html @@ -0,0 +1,128 @@ +--- +title: 'HTMLMedia​Element: play イベント' +slug: Web/API/HTMLMediaElement/play_event +tags: + - Audio + - Event + - HTMLMediaElement + - Reference + - Video +translation_of: Web/API/HTMLMediaElement/play_event +--- +

{{APIRef("HTMLMediaElement")}}

+ +

play メソッドまたは autoplay 属性の結果として、paused プロパティが true から false に変更されたときに play イベントが発生します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{DOMxRef("Event")}}
対象要素
既定のアクションなし
イベントハンドラプロパティ{{domxref("GlobalEventHandlers.onplay")}}
仕様HTML5 メディア
+ +

例

+ +

これらの例では、HTMLMediaElement の play イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。

+ +

addEventListener() を使用する場合

+ +
const video = document.querySelector('video');
+
+video.addEventListener('play', (event) => {
+  console.log('Boolean の paused プロパティは false になりました。 ' +
+  'play() メソッドが呼び出されたか、autoplay 属性が切り替えられました。');
+});
+ +

onplay イベントハンドラプロパティを使用する場合

+ +
const video = document.querySelector('video');
+
+video.onplay = (event) => {
+  console.log('Boolean の paused プロパティは false になりました。 ' +
+  'play() メソッドが呼び出されたか、autoplay 属性が切り替えられました。');
+};
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態
{{SpecName('HTML WHATWG', "media.html#event-media-play", "play media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-play", "play media event")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.play_event")}}

+ + + + + +

関連情報

+ + + +

 

diff --git a/files/ja/web/api/htmlmediaelement/playbackrate/index.html b/files/ja/web/api/htmlmediaelement/playbackrate/index.html new file mode 100644 index 0000000000..1cb8e9c088 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/playbackrate/index.html @@ -0,0 +1,73 @@ +--- +title: HTMLMediaElement.playbackRate +slug: Web/API/HTMLMediaElement/playbackRate +tags: + - API + - HTML DOM + - HTMLMediaElement + - Property + - プロパティ +translation_of: Web/API/HTMLMediaElement/playbackRate +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLMediaElement.playbackRate プロパティは、メディアが再生されるレートを設定します。これはユーザーが早送りやスローモーションなどのユーザー制御を実装するために使用されます。通常の再生レートにこの値を掛けて現在のレートが求められるため、 1.0 の値が通常の速度です。

+ +

playbackRate が負の数であれば、メディアは逆方向に再生されます。

+ +

音声は、逆方向の再生であったり、早送りやスロー再生が実用的な範囲を外れていた場合 (例えば、 Gecko は 0.25 から 5.0 の範囲であれば) ミュートされます。

+ +

既定では音声の高さが修正され、どの速度でも同じになります。ブラウザーによっては、これを制御するために標準外の preservespitch プロパティを実装しています。

+ +

構文

+ +
// 動画
+video.playbackRate = 1.5;
+// 音声
+audio.playbackRate = 1.0;
+
+ +

値

+ +

double 型。 1.0 は「通常の速度」で、 1.0 より小さければ通常より遅く、大きければ通常より早く再生されます。 (既定値: 1.0)

+ +

例

+ +
var obj = document.createElement('video');
+console.log(obj.playbackRate); // Expected Output: 1
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "#dom-media-playbackrate", "HTMLMediaElement.playbackRate")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.playbackRate")}}{{Spec2('HTML5 W3C')}} 
+ +

ブラウザーの対応

+ + + +

{{Compat("api.HTMLMediaElement.playbackRate")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/playing_event/index.html b/files/ja/web/api/htmlmediaelement/playing_event/index.html new file mode 100644 index 0000000000..6008cd8af0 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/playing_event/index.html @@ -0,0 +1,129 @@ +--- +title: 'HTMLMediaElement: playing イベント' +slug: Web/API/HTMLMediaElement/playing_event +tags: + - API + - Event + - HTMLMediaElement + - Reference + - Web + - events + - playing + - イベント +translation_of: Web/API/HTMLMediaElement/playing_event +--- +
{{APIRef("HTMLMediaElement")}}
+ +

playing イベントは、データ不足のために一時停止または遅延した後に、再開する準備ができたときに発生します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{DOMxRef("Event")}}
対象Element
既定のアクションなし
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onplaying")}}
仕様書HTML5 media
+ +

例

+ +

これらの例は、 HTMLMediaElement の playing イベントにイベントリスナーを追加してから、イベントが発生したことでイベントハンドラーが動作したときにメッセージをポストします。

+ +

addEventListener() を使用した例:

+ +
const video = document.querySelector('video');
+
+video.addEventListener('playing', (event) => {
+  console.log('Video is no longer paused');
+});
+ +

onplaying イベントハンドラープロパティを使用した例:

+ +
const video = document.querySelector('video');
+
+video.onplaying = (event) => {
+  console.log('Video is no longer paused.');
+};
+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('HTML WHATWG', "media.html#event-media-playing", "playing media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-playing", "playing media event")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.HTMLMediaElement.playing_event")}}

+ + + + + +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/progress_event/index.html b/files/ja/web/api/htmlmediaelement/progress_event/index.html new file mode 100644 index 0000000000..12fe68fd4e --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/progress_event/index.html @@ -0,0 +1,163 @@ +--- +title: 'HTMLMediaElement: progress イベント' +slug: Web/API/HTMLMediaElement/progress_event +tags: + - API + - Event + - HTMLMediaElement + - Reference + - Web + - progress + - イベント +translation_of: Web/API/HTMLMediaElement/progress_event +--- +
{{APIRef}}
+ +

progress イベントは、ブラウザーがリソースを読み込むときに定期的に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティonprogress
+ +

例

+ +

ライブデモ

+ +

HTML

+ +
<div class="example">
+
+    <button type="button">Load video</button>
+    <video controls width="250"></video>
+
+    <div class="event-log">
+        <label>Event log:</label>
+        <textarea readonly class="event-log-contents"></textarea>
+    </div>
+
+</div>
+ + + +

JS

+ +
const loadVideo = document.querySelector('button');
+const video = document.querySelector('video');
+const eventLog = document.querySelector('.event-log-contents');
+let source = null;
+
+function handleEvent(event) {
+    eventLog.textContent = eventLog.textContent + `${event.type}\n`;
+}
+
+video.addEventListener('loadstart', handleEvent);
+video.addEventListener('progress', handleEvent);
+video.addEventListener('canplay', handleEvent);
+video.addEventListener('canplaythrough', handleEvent);
+
+loadVideo.addEventListener('click', () => {
+
+    if (source) {
+        document.location.reload();
+    } else {
+        loadVideo.textContent = "Reset example";
+        source = document.createElement('source');
+        source.setAttribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm');
+        source.setAttribute('type', 'video/webm');
+
+        video.appendChild(source);
+    }
+});
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '200px') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('HTML WHATWG', "media.html#event-media-progress", "progress media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-progress", "progress media event")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.HTMLMediaElement.progress_event")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/ratechange_event/index.html b/files/ja/web/api/htmlmediaelement/ratechange_event/index.html new file mode 100644 index 0000000000..02c1a840ea --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/ratechange_event/index.html @@ -0,0 +1,124 @@ +--- +title: 'HTMLMediaElement: ratechange イベント' +slug: Web/API/HTMLMediaElement/ratechange_event +tags: + - Audio + - HTMLMediaElement + - Reference + - Video + - events +translation_of: Web/API/HTMLMediaElement/ratechange_event +--- +

{{APIRef("HTMLMediaElement")}}

+ +

ratechange イベントは、再生レートが変更されたときに発生します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{DOMxRef("Event")}}
対象要素
既定のアクションなし
イベントハンドラプロパティ{{domxref("GlobalEventHandlers.onratechange")}}
仕様HTML5 メディア
+ +

例

+ +

これらの例では、HTMLMediaElement の ratechange イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。

+ +

AddEventListener() を使用する場合

+ +
const video = document.querySelector('video');
+
+video.addEventListener('ratechange', (event) => {
+  console.log('再生レートが変わりました。');
+});
+ +

onratechange イベントハンドラプロパティを使用する場合

+ +
const video = document.querySelector('video');
+
+video.onratechange = (event) => {
+  console.log('再生レートが変わりました。');
+};
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態
{{SpecName('HTML WHATWG', "media.html#event-media-ratechange", "ratechange media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-ratechange", "ratechange media event")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.ratechange_event")}}

+ + + + + +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/readystate/index.html b/files/ja/web/api/htmlmediaelement/readystate/index.html new file mode 100644 index 0000000000..c8b458ca6c --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/readystate/index.html @@ -0,0 +1,116 @@ +--- +title: HTMLMediaElement.readyState +slug: Web/API/HTMLMediaElement/readyState +tags: + - API + - HTML DOM + - HTMLMediaElement + - Property + - Read-only + - Web +translation_of: Web/API/HTMLMediaElement/readyState +--- +
値{{APIRef("HTML DOM")}}
+ +

HTMLMediaElement.readyState プロパティは、メディアの準備状態を示します。

+ +

構文

+ +
var readyState = audioOrVideo.readyState;
+ +

値

+ +

unsigned short 型。 可能な値は次のとおりです。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
定数値説明
HAVE_NOTHING0メディアリソースに関する情報はありません。
HAVE_METADATA1メタデータ属性を初期化するのに十分なメディアリソースが取得されました。 シークならば例外を発生させません。
HAVE_CURRENT_DATA2現在の再生位置にデータがありますが、実際には複数のフレームを再生するのに十分ではありません。
HAVE_FUTURE_DATA3現在の再生位置と将来までの少なくともほんの少しの時間のデータが利用可能です（つまり、例えば、少なくとも2フレームの動画）。
HAVE_ENOUGH_DATA4十分なデータが利用可能であり、ダウンロードレートが十分に高いため、メディアを中断することなく最後まで再生できます。
+ +

例

+ +

この例では、要素 `example` に読み込まれる音声データをリッスンします。 その後、少なくとも現在の再生位置が読み込まれているかどうかを確認します。 もしあれば、音声を再生します。

+ +
<audio id="example" preload="auto">
+ <source src="sound.ogg" type="audio/ogg" />
+</audio>
+
+ +
var obj = document.getElementById('example');
+
+obj.addEventListener('loadeddata', function() {
+
+  if(obj.readyState >= 2) {
+    obj.play();
+  }
+
+});
+
+ + + +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "#dom-media-readystate", "HTMLMediaElement.readyState")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.readyState")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.readyState")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/seekable/index.html b/files/ja/web/api/htmlmediaelement/seekable/index.html new file mode 100644 index 0000000000..6486d24268 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/seekable/index.html @@ -0,0 +1,76 @@ +--- +title: HTMLMediaElement.seekable +slug: Web/API/HTMLMediaElement/seekable +tags: + - API + - Audio + - Extensions + - HTMLMediaElement + - MSE + - Media + - Property + - Reference + - Video + - seekable + - source +translation_of: Web/API/HTMLMediaElement/seekable +--- +
{{APIRef("HTML DOM")}}
+ +

{{domxref("HTMLMediaElement")}} の seekable 読み取り専用プロパティは、ユーザーがシークできる時間範囲があればそれを含む {{domxref('TimeRanges')}} オブジェクトを返します。

+ +

構文

+ +
var seekable = audioOrVideo.seekable;
+ +

値

+ +

{{domxref('TimeRanges')}} オブジェクト。

+ +

例

+ +
// 未定
+ +

 

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "the-video-element.html#dom-media-seekable", "HTMLMediaElement")}}{{Spec2('HTML WHATWG')}}{{SpecName('HTML5 W3C')}} から変更なし
{{SpecName('HTML5 W3C', "embedded-content-0.html#dom-media-seekable", "HTMLMediaElement")}}{{Spec2('HTML5 W3C')}}初期定義
{{SpecName('Media Source Extensions','#htmlmediaelement-extensions','HTMLMediaElement extensions, like for seekable')}}{{Spec2('Media Source Extensions')}}ソースが {{domxref("MediaSource")}} オブジェクトであるメディア要素のシーク可能な時間範囲を返すための新しいアルゴリズムを指定します。
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.HTMLMediaElement.seekable")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/seeked_event/index.html b/files/ja/web/api/htmlmediaelement/seeked_event/index.html new file mode 100644 index 0000000000..a91ac969fc --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/seeked_event/index.html @@ -0,0 +1,124 @@ +--- +title: 'HTMLMediaElement: seeked イベント' +slug: Web/API/HTMLMediaElement/seeked_event +tags: + - Audio + - HTMLMediaElement + - Reference + - Video + - events +translation_of: Web/API/HTMLMediaElement/seeked_event +--- +

{{APIRef("HTMLMediaElement")}}

+ +

seeked イベントは、シーク操作が完了したことで、現在の再生位置が変更され、Boolean の seeking 属性が false に変更されたときに発生します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{DOMxRef("Event")}}
対象要素
既定のアクションなし
イベントハンドラプロパティ{{domxref("GlobalEventHandlers.onseeked")}}
仕様HTML5 メディア
+ +

例

+ +

これらの例では、HTMLMediaElement の seeked イベントにイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。

+ +

AddEventListener() を使用する場合

+ +
const video = document.querySelector('video');
+
+video.addEventListener('seeked', (event) => {
+  console.log('動画が探していた再生位置を見つけました。');
+});
+ +

onseeked イベントハンドラプロパティを使用する場合

+ +
const video = document.querySelector('video');
+
+video.onseeked = (event) => {
+  console.log('動画が探していた再生位置を見つけました。');
+};
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態
{{SpecName('HTML WHATWG', "media.html#event-media-seeked", "seeked media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-seeked", "seeked media event")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.seeked_event")}}

+ + + + + +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/seeking_event/index.html b/files/ja/web/api/htmlmediaelement/seeking_event/index.html new file mode 100644 index 0000000000..8a8e697349 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/seeking_event/index.html @@ -0,0 +1,124 @@ +--- +title: 'HTMLMediaElement: seeking イベント' +slug: Web/API/HTMLMediaElement/seeking_event +tags: + - Audio + - HTMLMediaElement + - Reference + - Video + - events +translation_of: Web/API/HTMLMediaElement/seeking_event +--- +

{{APIRef("HTMLMediaElement")}}

+ +

seeking イベントは、シーク操作が開始されると発生します。 つまり、Boolean の seeking 属性を true に変更し、メディアは新しい位置をシーク中です。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{DOMxRef("Event")}}
対象要素
既定のアクションなし
イベントハンドラプロパティ{{domxref("GlobalEventHandlers.onseeking")}}
仕様HTML5 メディア
+ +

例

+ +

これらの例では、HTMLMediaElement の seeking イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。

+ +

AddEventListener() を使用する場合

+ +
const video = document.querySelector('video');
+
+video.addEventListener('seeking', (event) => {
+  console.log('動画は新しい位置をシーク中です。');
+});
+ +

onseeking イベントハンドラプロパティを使用する場合

+ +
const video = document.querySelector('video');
+
+video.onseeking = (event) => {
+  console.log('動画は新しい位置をシーク中です。');
+};
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態
{{SpecName('HTML WHATWG', "media.html#event-media-seeking", "seeking media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-seeking", "seeking media event")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.seeking_event")}}

+ + + + + +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/src/index.html b/files/ja/web/api/htmlmediaelement/src/index.html new file mode 100644 index 0000000000..4f9b78c6ec --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/src/index.html @@ -0,0 +1,67 @@ +--- +title: HTMLMediaElement.src +slug: Web/API/HTMLMediaElement/src +tags: + - API + - HTML DOM + - HTMLMediaElement + - Property + - Reference + - src +translation_of: Web/API/HTMLMediaElement/src +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLMediaElement.src プロパティは、HTML メディア要素の src 属性の値を反映します。 これは、要素で使用するメディアリソースの URL を示します。

+ +
+

注: この要素が現在実際に使用しているメディアリソースの URL を知る最善の方法は、{{domxref("HTMLMediaElement.currentSrc", "currentSrc")}} 属性の値を調べることです。 これは、（{{HTMLElement("source")}} 要素を表す）{{domxref("HTMLSourceElement")}} で提供されるリストからの最良または優先メディアリソースの選択も考慮に入れます。

+
+ +

構文

+ +
var mediaUrl = HTMLMediaElement.src;
+ +

値

+ +

要素で使用するメディアリソースの URL を含む {{domxref("USVString")}} オブジェクト。 このプロパティは HTML 要素の src 属性の値を反映します。

+ +

例

+ +
var obj = document.createElement('video');
+console.log(obj.src); // ""
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "embedded-content.html#dom-media-src", "HTMLMediaElement.src")}}{{Spec2('HTML WHATWG')}}{{SpecName('HTML5 W3C')}} から変更なし
{{SpecName('HTML5 W3C', "embedded-content-0.html#dom-media-src", "HTMLMediaElement.src")}}{{Spec2('HTML5 W3C')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.src")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/srcobject/index.html b/files/ja/web/api/htmlmediaelement/srcobject/index.html new file mode 100644 index 0000000000..2964da4e87 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/srcobject/index.html @@ -0,0 +1,84 @@ +--- +title: HTMLMedia​Element​.src​Object +slug: Web/API/HTMLMediaElement/srcObject +tags: + - API + - DOM + - HTML + - HTML DOM + - HTMLMediaElement + - Media + - Reference + - srcObject +translation_of: Web/API/HTMLMediaElement/srcObject +--- +
{{APIRef("HTML DOM")}}
+ +

{{domxref("HTMLMediaElement")}} インターフェイスの srcObject プロパティは {{domxref("HTMLMediaElement")}} に関連付けられたメディアソースを提供するオブジェクトを設定または取得します。 このオブジェクトは {{domxref("MediaStream")}}、{{domxref("MediaSource")}}、{{domxref("Blob")}} や(Blobから派生している) {{domxref("File")}} です。

+ +
+

注: 2017年11月現在、ブラウザーは MediaStream のみをサポートしています。 MediaSource、Blob、および File の場合は、{{domxref("URL.createObjectURL()")}} を使用して URL を作成し、それを {{domxref("HTMLMediaElement.src")}} に割り当てる必要があります。 例として以下を参照してください。

+
+ +

構文

+ +
var sourceObject = HTMLMediaElement.srcObject;
+
+HTMLMediaElement.srcObject = sourceObject;
+
+ +

値

+ +

{{domxref('MediaStream')}}、{{domxref('MediaSource')}}、{{domxref('Blob')}}、{{domxref('File')}} オブジェクト。(実際に何がサポートされているのかは互換性テーブルを確認してください。)

+ +

使用上の注意

+ +

メディアソース仕様の古いバージョンでは、オブジェクト URL を作成するために {{domxref("URL.createObjectURL", "createObjectURL()")}} を使用してから、その URL を {{domxref("HTMLMediaElement.src", "src")}} に設定する必要がありました。 現在は、{{domxref("MediaStream")}} を srcObject に直接設定できます。

+ +

例

+ +

基本的な例

+ +

この例では、メディアソースを新しく作成した {{HTMLElement("video")}} 要素に割り当てています。

+ +
const mediaSource = new MediaSource();
+const video = document.createElement('video');
+video.srcObject = mediaSource;
+ +

src プロパティへの代替をサポート

+ +

上記の例のこのバージョンは、古いバージョンのブラウザーをサポートしています。 それは srcObject をサポートしていない場合に、オブジェクト URL を作成して、それを src に割り当てる必要があります。

+ +
const mediaSource = new MediaSource();
+const video = document.createElement('video');
+// 古いブラウザーは srcObject を持っていないかもしれません。
+if ('srcObject' in video) {
+  video.srcObject = mediaSource;
+} else {
+  // これは消えつつあるので、新しいブラウザーで使用しないでください。
+  video.src = URL.createObjectURL(mediaSource);
+}
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-srcobject', 'srcObject')}}{{Spec2('HTML WHATWG')}}初回定義。
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.srcObject")}}

diff --git a/files/ja/web/api/htmlmediaelement/stalled_event/index.html b/files/ja/web/api/htmlmediaelement/stalled_event/index.html new file mode 100644 index 0000000000..761c80e847 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/stalled_event/index.html @@ -0,0 +1,124 @@ +--- +title: 'HTMLMediaElement: stalled イベント' +slug: Web/API/HTMLMediaElement/stalled_event +tags: + - Audio + - HTMLMediaElement + - Reference + - Video + - events +translation_of: Web/API/HTMLMediaElement/stalled_event +--- +

{{APIRef("HTMLMediaElement")}}

+ +

stalled イベントは、ユーザーエージェントがメディアデータをフェッチしようとして、データが予期せずに来なかったときに発生します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{DOMxRef("Event")}}
対象要素
既定のアクションなし
イベントハンドラプロパティ{{domxref("GlobalEventHandlers.onstalled")}}
仕様HTML5 メディア
+ +

例

+ +

これらの例では、HTMLMediaElement の stalled イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。

+ +

AddEventListener() を使用する場合

+ +
const video = document.querySelector('video');
+
+video.addEventListener('stalled', (event) => {
+  console.log('データのフェッチに失敗しました。');
+});
+ +

onstalled イベントハンドラプロパティを使用する場合

+ +
const video = document.querySelector('video');
+
+video.onstalled = (event) => {
+  console.log('データのフェッチに失敗しました。');
+};
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態
{{SpecName('HTML WHATWG', "media.html#event-media-stalled", "stalled media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-stalled", "stalled media event")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.stalled_event")}}

+ + + + + +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/suspend_event/index.html b/files/ja/web/api/htmlmediaelement/suspend_event/index.html new file mode 100644 index 0000000000..635b27d960 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/suspend_event/index.html @@ -0,0 +1,128 @@ +--- +title: 'HTMLMediaElement: suspend イベント' +slug: Web/API/HTMLMediaElement/suspend_event +tags: + - Audio + - HTMLMediaElement + - Reference + - Video + - events +translation_of: Web/API/HTMLMediaElement/suspend_event +--- +

{{APIRef("HTMLMediaElement")}}

+ +

suspend イベントは、メディアデータの読み込みが中断されたときに発生します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{DOMxRef("Event")}}
対象要素
既定のアクションなし
イベントハンドラプロパティ{{domxref("GlobalEventHandlers.onsuspend")}}
仕様HTML5 メディア
+ +

例

+ +

これらの例では、HTMLMediaElement の suspend イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。

+ +

AddEventListener() を使用する場合

+ +
const video = document.querySelector('video');
+
+video.addEventListener('suspend', (event) => {
+  console.log('データの読み込みが中断されました。');
+});
+ +

onsuspend イベントハンドラプロパティを使用する場合

+ +
const video = document.querySelector('video');
+
+video.onsuspend = (event) => {
+  console.log('データの読み込みが中断されました。');
+};
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様状態
{{SpecName('HTML WHATWG', "media.html#event-media-suspend", "suspend media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-suspend", "suspend media event")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.suspend_event")}}

+ + + + + +

関連情報

+ + + + diff --git a/files/ja/web/api/htmlmediaelement/timeupdate_event/index.html b/files/ja/web/api/htmlmediaelement/timeupdate_event/index.html new file mode 100644 index 0000000000..286113c0e1 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/timeupdate_event/index.html @@ -0,0 +1,130 @@ +--- +title: 'HTMLMediaElement: timeupdate イベント' +slug: Web/API/HTMLMediaElement/timeupdate_event +tags: + - Audio + - Event + - HTMLMediaElement + - Reference + - Video + - Web + - timeupdate +translation_of: Web/API/HTMLMediaElement/timeupdate_event +--- +
{{APIRef("HTMLMediaElement")}}
+ +

timeupdate イベントは、currentTime 属性で示される時刻が更新されたときに発生します。

+ +

イベントの頻度はシステムの負荷に依存しますが、およそ 4Hz と 66Hz との間でスローされます (イベントハンドラーが実行するのに 250 ms 以上かかることはないと仮定します)。ユーザーエージェントはシステム負荷とその都度イベントを処理する平均コストに基づいて、イベントの頻度を変えることが推奨されているため、ユーザーエージェントがビデオのデコード中に快適に処理できるよりも頻繁に UI 更新が行われることはありません。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能不可
インターフェイス{{DOMxRef("Event")}}
対象Element
既定のアクションなし
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.ontimeupdate")}}
仕様書HTML5 media
+ +

例

+ +

これらの例は、 HTMLMediaElement の timeupdate イベントのイベントリスナーを追加し、イベントが発生してイベントハンドラーが動作するときにメッセージを投稿します。なお、イベントの頻度はシステムの稼働状況に依存します。

+ +

addEventListener() の使用:

+ +
const video = document.querySelector('video');
+
+video.addEventListener('timeupdate', (event) => {
+  console.log('The currentTime attribute has been updated. Again.');
+});
+ +

ontimeupdate イベントハンドラープロパティの使用:

+ +
const video = document.querySelector('video');
+
+video.ontimeupdate = (event) => {
+  console.log('The currentTime attribute has been updated. Again.');
+};
+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('HTML WHATWG', "media.html#event-media-timeupdate", "timeupdate media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-timeupdate", "timeupdate media event")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.timeupdate_event")}}

+ + + + + +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/videotracks/index.html b/files/ja/web/api/htmlmediaelement/videotracks/index.html new file mode 100644 index 0000000000..284d84db3d --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/videotracks/index.html @@ -0,0 +1,63 @@ +--- +title: HTMLMediaElement.videoTracks +slug: Web/API/HTMLMediaElement/videoTracks +tags: + - API + - HTML DOM + - HTMLMediaElement + - Media + - Property + - Reference + - Tracks + - Video + - Video Tracks + - Web + - videoTracks +translation_of: Web/API/HTMLMediaElement/videoTracks +--- +
{{APIRef("HTML DOM")}}{{draft}}
+ +

{{DOMxRef("HTMLMediaElement")}} オブジェクトの読み取り専用の videoTracks プロパティは、メディア要素の動画トラックを表すすべての {{DOMxRef("VideoTrack")}} オブジェクトを列挙した {{DOMxRef("VideoTrackList")}} オブジェクトを返します。

+ +

返されたリストはライブです。 つまり、トラックがメディア要素に追加されたり取り除かれたりすると、リストの内容は動的に変化します。 リストへの参照を取得したら、新しい動画トラックが追加されたのか既存のトラックが取り除かれたのかを検出するために変更を監視できます。 メディア要素のトラックリストへの変更を監視する方法の詳細については、{{DOMxRef("VideoTrackList")}} のイベントハンドラを参照してください。

+ +

構文

+ +
var videoTracks = mediaElement.videoTracks;
+ +

値

+ +

メディア要素に含まれる動画トラックのリストを表す {{DOMxRef("VideoTrackList")}} オブジェクト。 トラックのリストは、配列記法や、オブジェクトの {{domxref("VideoTrackList.getTrackById", "getTrackById()")}} メソッドを使ってアクセスできます。

+ +

各トラックは、トラックに関する情報を提供する {{DOMxRef("VideoTrack")}} オブジェクトによって表されます。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("HTML WHATWG", "#dom-media-videotracks", "HTMLMediaElement.videoTracks")}}{{Spec2("HTML WHATWG")}}{{SpecName('HTML5 W3C')}} から変更なし
+ +

ブラウザーの対応

+ + + +

{{Compat("api.HTMLMediaElement.videoTracks")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/volume/index.html b/files/ja/web/api/htmlmediaelement/volume/index.html new file mode 100644 index 0000000000..e0fa5f8bf1 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/volume/index.html @@ -0,0 +1,64 @@ +--- +title: HTMLMediaElement.volume +slug: Web/API/HTMLMediaElement/volume +tags: + - API + - HTML DOM + - HTMLMediaElement + - Property + - Reference + - Volume +translation_of: Web/API/HTMLMediaElement/volume +--- +

{{APIRef("HTML DOM")}}

+ +

HTMLMediaElement.volume プロパティは、メディアを再生する音量を設定します。

+ +

構文

+ +
var volume ​= video.volume; //1
+ +

値

+ +

double 型で値は 0 から 1 の間でなければなりません。 ここで、0 は効果的にミュートされ、1 が最大の可能な値です。

+ +

例

+ +
var obj = document.createElement('audio');
+console.log(obj.volume); // 1
+obj.volume = 0.75;
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "#dom-media-volume", "HTMLMediaElement.volume")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.volume")}}{{Spec2('HTML5 W3C')}} 
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.volume")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/volumechange_event/index.html b/files/ja/web/api/htmlmediaelement/volumechange_event/index.html new file mode 100644 index 0000000000..f3be89029d --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/volumechange_event/index.html @@ -0,0 +1,132 @@ +--- +title: 'HTMLMediaElement: volumechange イベント' +slug: Web/API/HTMLMediaElement/volumechange_event +tags: + - API + - Audio + - Event + - HTMLMediaElement + - Reference + - Video + - Web + - events + - イベント + - 動画 + - 音声 +translation_of: Web/API/HTMLMediaElement/volumechange_event +--- +
{{APIRef("HTMLMediaElement")}}
+ +

volumechange イベントは、ボリュームが変更されたときに発生します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{DOMxRef("Event")}}
対象Element
既定のアクションなし
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onvolumechange")}}
仕様書HTML5 media
+ +

例

+ +

これらの例では HTMLMediaElement の volumechange イベントのイベントリスナーを追加し、イベントが発生してイベントハンドラーが反応したときにメッセージをポストします。

+ +

addEventListener() を使用した例:

+ +
const video = document.querySelector('video');
+
+video.addEventListener('volumechange', (event) => {
+  console.log('The volume changed.');
+});
+ +

onvolumechange イベントハンドラープロパティを使用した例:

+ +
const video = document.querySelector('video');
+
+video.onvolumechange = (event) => {
+  console.log('The volume changed.');
+};
+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('HTML WHATWG', "media.html#event-media-volumechange", "volumechange media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-volumechange", "volumechange media event")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.HTMLMediaElement.volumechange_event")}}

+ + + + + +

関連情報

+ + diff --git a/files/ja/web/api/htmlmediaelement/waiting_event/index.html b/files/ja/web/api/htmlmediaelement/waiting_event/index.html new file mode 100644 index 0000000000..b901bfc0a9 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/waiting_event/index.html @@ -0,0 +1,131 @@ +--- +title: 'HTMLMediaElement: waiting イベント' +slug: Web/API/HTMLMediaElement/waiting_event +tags: + - Audio + - Event + - HTMLMediaElement + - Reference + - Video + - Web + - イベント + - ウェブ + - 動画 + - 音声 +translation_of: Web/API/HTMLMediaElement/waiting_event +--- +
{{APIRef("HTMLMediaElement")}}
+ +

waiting イベントは、一時的にデータが欠落しているために再生が停止したときに発生します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{DOMxRef("Event")}}
対象Element
既定のアクションなし
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onwaiting")}}
仕様書HTML5 media
+ +

例

+ +

これらの例は、 HTMLMediaElement の waiting イベントのイベントリスナーを追加し、イベントの発生によりイベントハンドラーが動作したときにメッセージを登録します。

+ +

addEventListener() の使用:

+ +
const video = document.querySelector('video');
+
+video.addEventListener('waiting', (event) => {
+  console.log('Video is waiting for more data.');
+});
+ +

onwaiting イベントハンドラープロパティの使用:

+ +
const video = document.querySelector('video');
+
+video.onwaiting = (event) => {
+  console.log('Video is waiting for more data.');
+};
+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('HTML WHATWG', "media.html#event-media-waiting", "waiting media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-waiting", "waiting media event")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLMediaElement.waiting_event")}}

+ + + + + +

関連情報

+ + -- cgit v1.2.3-54-g00ecf