diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/api/htmlmediaelement | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/ja/web/api/htmlmediaelement')
55 files changed, 5502 insertions, 0 deletions
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 +--- +<div>{{APIRef}}</div> + +<p><strong><code>abort</code></strong> イベントは、リソースが完全に読み込まれなかったが、それがエラーの結果ではなかった場合に発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onabort", "onabort")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js">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);</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-abort")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-abort")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.HTMLMediaElement.abort_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}{{draft}}</div> + +<p><span class="seoSummary">{{domxref("HTMLMediaElement")}} オブジェクトの読み取り専用の audioTracks プロパティは、メディア要素の音声トラックを表すすべての {{domxref("AudioTrack")}} オブジェクトを列挙した {{domxref("AudioTrackList")}} オブジェクトを返します。</span> メディア要素は、{{HTMLElement("audio")}} 要素または {{HTMLElement("video")}} 要素のどちらでもかまいません。</p> + +<p>返されたリストは<em>ライブ</em>です。 つまり、トラックがメディア要素に追加されたり取り除かれたりすると、リストの内容は動的に変化します。 リストへの参照を取得したら、新しい音声トラックが追加されたのか既存のトラックが取り除かれたのかを検出するために変更を監視できます。 メディア要素のトラックリストへの変更を監視する方法の詳細については、{{domxref("AudioTrackList")}} の<a href="/ja/docs/Web/API/AudioTrackList#Event_handlers">イベントハンドラ</a>を参照してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>audioTracks</em> = <em>mediaElement</em>.audioTracks;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>メディア要素に含まれる音声トラックのリストを表す {{domxref("AudioTrackList")}} オブジェクト。 トラックのリストは、配列記法や、オブジェクトの {{domxref("AudioTrackList.getTrackById", "getTrackById()")}} メソッドを使ってアクセスできます。</p> + +<p>各トラックは、そのトラックに関する情報を提供する {{domxref("AudioTrack")}} オブジェクトによって表されます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、特定の要素のすべての音声トラックをミュートしています。</p> + +<h3 id="HTML" name="HTML">HTML</h3> + +<p>HTML は、要素自体を確立します。</p> + +<pre class="brush: html"><video id="video" src="somevideo.mp4"></video> +</pre> + +<h3 id="JavaScript" name="JavaScript">JavaScript</h3> + +<p>JavaScript コードは、動画要素の音声トラックのミュートを処理します。</p> + +<pre class="brush: js">var video = document.getElementById("video"); + +for (var i = 0; i < video.audioTracks.length; i += 1) { + video.audioTracks[i].enabled = false; +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-media-audiotracks", "HTMLMediaElement.audioTracks")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>{{SpecName('HTML5 W3C')}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.audioTracks")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + + + +<p>{{Compat("api.HTMLMediaElement.audioTracks")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> + <li>{{HTMLElement("audio")}} と {{HTMLElement("video")}}</li> + <li>{{domxref("AudioTrack")}} と {{domxref("AudioTrackList")}}</li> +</ul> 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 +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p><span class="seoSummary"><strong>HTMLMediaElement.autoplay</strong> プロパティは、 HTML の {{htmlattrxref("autoplay", "video")}} 属性を反映しています。 これは、中断することなく十分なメディアが使用可能になった時点で再生を自動的に開始するかどうかを示します。</span></p> + +<p>ソースが {{domxref("MediaStream")}} で <code>autoplay</code> プロパティが <code>true</code> のメディア要素は、アクティブになると(つまり、{{domxref("MediaStream.active")}} が <code>true</code> になると)再生を開始します。</p> + +<div class="note"> +<p><strong>注</strong>: 自動的に音声(または音声トラックを含む動画)を再生するサイトは、ユーザーにとって不快な経験になる可能性があるため、可能な限り避けるべきです。 自動再生機能を提供する必要がある場合は、オプトインする必要があります(ユーザーに明確に有効にするよう要求する)。 ただし、自動再生は、ソースが後でユーザーの制御下で設定されるメディア要素を作成するときには便利です。</p> +</div> + +<p>自動再生、自動再生のブロック、およびユーザーのブラウザーによって自動再生がブロックされた場合の対応方法についての詳細は、<a href="/ja/docs/Web/Media/Autoplay_guide">メディアおよびウェブオーディオ API の自動再生ガイド</a>を参照してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>HTMLMediaElement</em>.autoplay = true | false; + +var <em>autoplay</em> = <em>HTMLMediaElement</em>.autoplay;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{jsxref("Boolean")}} で、中断することなく再生できるように十分なコンテンツが読み込まれると同時にメディア要素が再生を開始する場合、この値は <code>true</code> です。</p> + +<div class="note"> +<p><strong>注</strong>: 一部のブラウザーでは、ユーザーに無断でまたはバックグラウンドで破壊的な音声または動画が再生されるのを防ぐために、 <code>autoplay</code> を無効にすることができます。 <code>autoplay</code> が実際に再生を開始することに頼らないでください。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<p>...</p> + +<pre class="brush: html"><video id="video" controls> + <source src="https://player.vimeo.com/external/250688977.sd.mp4?s=d14b1f1a971dde13c79d6e436b88a6a928dfe26b&profile_id=165"> +</video></pre> + +<p> </p> + +<pre>*** Disable autoplay (recommended) *** +訳: *** 自動再生を無効にする(推奨) *** + false is the default value + 訳: デフォルト値は false です。 + document.querySelector('#video').autoplay = false; +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "embedded-content.html#dom-media-autoplay", "HTMLMediaElement.autoplay")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>{{SpecName('HTML5 W3C')}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.autoplay")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + + + +<p>{{Compat("api.HTMLMediaElement.autoplay")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> + <li>{{HTMLElement("audio")}} 要素と {{HTMLElement("video")}} 要素</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>HTMLMediaElement.buffered</code></strong> 読み取り専用プロパティは、<code>buffered</code> プロパティにアクセスした時点でブラウザーがバッファリングしているメディアソースの範囲(存在する場合)を示す新しい {{domxref("TimeRanges")}} オブジェクトを返します。</span></p> + +<div class="note"><strong>注</strong>: この機能は <a href="/ja/docs/Web/API/Web_Workers_API">Web Workers</a> では利用できません。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>timeRange</em> = <em>audioObject</em>.buffered</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("TimeRanges")}} オブジェクト。 このオブジェクトは<a href="/ja/docs/Web/API/TimeRanges">正規化</a>されています。 つまり、複数の範囲は順序付けされており、(隣接する範囲は1つの大きな範囲に折りたたまれて、)重なり合ったり、空だったり、接触していたりすることはありません。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">var obj = document.createElement('video'); +console.log(obj.buffered); // TimeRanges { length: 0 } +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "embedded-content.html#media-elements", "HTMLMediaElement.buffered")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>{{SpecName('HTML5 W3C')}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.buffered")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.buffered")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> +</ul> 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 +--- +<div>{{APIRef("HTMLMediaElement")}}</div> + +<p><span class="seoSummary"><code>canplay</code> イベントは、ユーザーエージェントがメディアを再生できるようになったものの、追加のバッファリングのために停止することなくメディアの最後まで再生するには充分なデータが読み込まれていないとみられる場合に発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">対象</th> + <td>Element</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">イベントハンドラーのプロパティ</th> + <td>{{domxref("GlobalEventHandlers.oncanplay")}}</td> + </tr> + <tr> + <th scope="row">仕様書</th> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td> + </tr> + </tbody> +</table> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col">種類</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>イベントのターゲット (DOM ツリー内での最上位のターゲット)</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>イベントの型</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>イベントがバブリングするかどうか</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>イベントがキャンセル可能であるかどうか</td> + </tr> + </tbody> +</table> + +<h2 id="Related_Events" name="Related_Events">関連イベント</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing イベント')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough イベント')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate イベント')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play イベント')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend イベント')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied イベント')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled イベント')}}</li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> 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: 'HTMLMediaElement: canplaythrough イベント' +slug: Web/API/HTMLMediaElement/canplaythrough_event +tags: + - Audio + - Event + - HTMLMediaElement + - Reference + - Video +translation_of: Web/API/HTMLMediaElement/canplaythrough_event +--- +<p>{{APIRef("HTMLMediaElement")}}</p> + +<p><span class="seoSummary"><code>canplaythrough</code> イベントは、ユーザーエージェントがメディアを再生可能なときに発生し、コンテンツをさらにバッファリングするために再生を停止することなく、メディアを最後まで再生するのに十分なデータが読み込まれたと推定します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">対象</th> + <td>要素</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">イベントハンドラプロパティ</th> + <td>{{domxref("GlobalEventHandlers.oncanplaythrough")}}</td> + </tr> + <tr> + <th scope="row">仕様</th> + <td><a href="https://html.spec.whatwg.org/multipage/media.html#event-media-canplaythrough">HTML5 メディア</a></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらの例では、<code>HTMLMediaElement</code> の <code>canplaythrough</code> イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。</p> + +<p><code>AddEventListener()</code> を使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.addEventListener('canplaythrough', (event) => { + console.log('バッファリングを止めることなく、' + ' + 動画全体を再生できると思います。'); +});</pre> + +<p><code>oncanplaythrough</code> イベントハンドラプロパティを使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.oncanplaythrough = (event) => { + console.log('バッファリングを止めることなく、' + ' + 動画全体を再生できると思います。'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-canplaythrough", "canplaythrough media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-canplaythrough", "canplaythrough media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.canplaythrough_event")}}</p> + +<h2 id="Related_Events" name="Related_Events">関連イベント</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing イベント')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough イベント')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate イベント')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play イベント')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend イベント')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied イベント')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled イベント')}}</li> +</ul> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>HTMLMediaElement.canPlayType()</code></strong> メソッドは、指定されたメディアタイプを再生できるかどうかを決定します。</span></p> + +<div class="note"><strong>注</strong>: この機能は <a href="/ja/docs/Web/API/Web_Workers_API">Web Workers</a> では利用できません。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>str</em> = <em>audioOrVideo</em>.canPlayType(<em>mediaType</em>); +</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<dl> + <dt>mediaType</dt> + <dd>メディアの MIME タイプを含む {{domxref("DOMString")}}。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p>{{jsxref('String')}} 型。 可能な値は次のとおりです。</p> + +<ul> + <li><code>'probably'</code>: 指定されたメディアタイプは再生可能なようです。</li> + <li><code>'maybe'</code>: メディアタイプを再生せずに再生可能かどうかを判断できません。</li> + <li><code>''</code>(空の文字列): 指定されたメディアタイプは絶対に再生できません。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: 以前は <code>canPlayType('video/webm')</code> は <code>'probably'</code> を返しました。 Gecko 28 (Firefox 28 / Thunderbird 28 / SeaMonkey 2.25 / Firefox OS 1.3) 以降では、<code>'maybe'</code> を返します。 ({{bug(884275)}})</p> +</div> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">var obj = document.createElement('video'); +console.log(obj.canPlayType('video/mp4')); // "maybe" +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-navigator-canplaytype", "canplaytype")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.canplaytype")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + + + +<p>{{Compat("api.HTMLMediaElement.canPlayType")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> + <li>{{domxref("MediaCapabilities")}}</li> +</ul> 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 +--- +<div>{{APIRef("HTML Media Capture")}}</div> + +<p>{{domxref("HTMLMediaElement")}} インターフェイスの <strong><code>captureStream()</code></strong> プロパティは、メディア要素でレンダリングされているコンテンツのリアルタイムキャプチャをストリーミングしている {{domxref('MediaStream')}} オブジェクトを返します。</p> + +<p>これは、例えば <a href="/ja/docs/Web/API/WebRTC_API">WebRTC</a> の {{domxref("RTCPeerConnection")}} のソースとして使用できます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>mediaStream</em> = mediaElement.captureStream()</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<p>無し。</p> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p>他のメディア処理コードによる音声データおよび/または動画データのソースとして、または <a href="/ja/docs/Glossary/WebRTC">WebRTC</a> のソースとして使用できる {{domxref('MediaStream')}} オブジェクト。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、イベントハンドラが確立されているため、ボタンをクリックすると、ID が <code>"playback"</code> のメディア要素のコンテンツの {{domxref("MediaStream")}} へのキャプチャを開始します。 これにより、WebRTC を介したストリーミングのソースなど、他の目的にストリームを使用して、動画通話中に録画済みの動画を他の人と共有できるようになります。</p> + +<pre class="brush: js">document.querySelector('.playAndRecord').addEventListener('click', function() { + var playbackElement = document.getElementById("playback"); + var captureStream = playbackElement.captureStream(); + playbackElement.play(); +}); +</pre> + +<p>より長くより複雑な例と説明については、<a href="/ja/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element">メディア要素の記録</a>を参照してください。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('Media Capture DOM Elements','#widl-HTMLMediaElement-captureStream-MediaStream','captureStream()')}}</td> + <td>{{Spec2('Media Capture DOM Elements')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.HTMLMediaElement.captureStream")}}</p> + +<h3 id="Firefox-specific_notes" name="Firefox-specific_notes">Firefox 特有のメモ</h3> +</div> + +<p>Firefox 51 より前のバージョンでは、ソースがそれ自体が {{domxref("MediaStream")}} であるメディア要素では、<strong><code>captureStream()</code></strong> を使用できませんでした({{domxref("RTCPeerConnection")}} を介して受信されるストリームを表示している {{HTMLElement("video")}} 要素など)。 Firefox 51 以降、これは機能します。 これは、動画要素からストリームをキャプチャし、それを記録するために {{domxref("MediaRecorder")}} を使用できることを意味します。 詳細は {{bug(1259788)}} をご覧ください。</p> + +<p>ただし、正当な理由で、Firefox では <code>captureStream()</code> の先頭に <code>mozCaptureStream()</code> が付いています。 現在の実装には、次のような注目に値するいくつかの奇妙な点があります。</p> + +<ul> + <li>Firefox の実装は現在、メディア要素のソース自体が {{domxref("MediaStream")}} である場合にのみ、仕様で説明しているように機能します。</li> + <li>メディア要素のソースが <code>MediaStream</code> ではない場合、このメソッドからの出力は仕様と互換性がありません。 そして、キャプチャの開始後にソースを変更した場合、その非互換性のために出力キャプチャストリームは新しいソースデータを受け入れることができません。 したがって、新しいソースの <code>MediaStream</code> からの {{domxref("MediaStreamTrack")}} はキャプチャしたストリームに追加されず、更新されたソースをキャプチャしない出力になります。</li> + <li>ソースを <code>MediaStream</code> に戻すと、トラックをストリームに戻して追加し、期待どおりに機能します。</li> + <li><code>MediaStream</code> のソースを使用して要素に対して <code>mozCaptureMediaStream()</code> を呼び出すと、要素が <code>MediaStream</code> を再生している間はトラックのみを含むストリームを返します。</li> + <li>ソースメディアのないメディア要素で <code>mozCaptureMediaStream()</code> を呼び出すと、その互換モードは最初に追加されたソースに基づきます。 例えば、<code>MediaStream</code> の場合、キャプチャストリームはそれ以降 <code>MediaStream</code> のソースでのみ機能します。</li> + <li><code>MediaStream</code> 以外のソースのサポートが仕様に達した時点で、接頭辞なしのメソッドの場合、この特別なふるまいは取り除かれます。 詳細は {{bug(1259788, "bug", 160)}} をご覧ください。</li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element">メディア要素の記録</a></li> + <li><a href="/ja/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a></li> + <li>{{domxref("HTMLCanvasElement.captureStream()")}}</li> + <li>{{domxref("MediaStream")}}</li> + <li><a href="/ja/docs/Web/API/WebRTC_API">WebRTC API</a></li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>HTMLMediaElement.controller</code></strong> プロパティは、要素に割り当てられたメディアコントローラを表します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: js">...</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("MediaController")}} オブジェクトまたは、要素にメディアコントローラが割り当てられていない場合は <code>null</code>。 デフォルトは <code>null</code> です。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">... +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.controller")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.controller")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>HTMLMediaElement.controls</code></strong> プロパティには、{{htmlattrxref("controls", "video")}} HTML 属性が反映されます。 これは、メディア項目を再生するためのユーザーインターフェイスのコントロールを表示するかどうかを制御します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>ctrls</em> = <em>video</em>.controls; +<em>audio</em>.controls = true;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{jsxref("Boolean")}}。 値が <code>true</code> の場合、コントロールが表示されます。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">var obj = document.createElement('video'); +obj.controls = true; +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-media-controls", "HTMLMediaElement.controls")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>{{SpecName('HTML5 W3C')}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.controls")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.controls")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>HTMLMediaElement.crossOrigin</code></strong> プロパティは、画像等の要素のための CORS 設定です。 詳しくは、<a href="/ja/docs/HTML/CORS_settings_attributes">CORS 設定属性</a>を参照してください。</span></p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#attr-media-crossorigin", "HTMLMediaElement.crossOrigin")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>{{SpecName('HTML5 W3C')}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.crossOrigin")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.crossOrigin")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>HTMLMediaElement.currentSrc</code></strong> プロパティには、選択されたメディアリソースの絶対 URL が含まれています。</span> これは、例えば、ウェブサーバーがユーザーのディスプレイの解像度に基づいてメディアファイルを選択した場合に発生する可能性があります。 <code>networkState</code> プロパティが <code>EMPTY</code> の場合、値は空の文字列です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>mediaUrl</em> = <em>audioObject</em>.currentSrc;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>選択されたメディアソースの絶対 URL を含む {{domxref("DOMString")}} オブジェクト。 <code>networkState</code> が <code>EMPTY</code> の場合、これは空の文字列になります。 それ以外の場合は、メディア要素内に含まれる {{domxref("HTMLSourceElement")}} によってリストされたリソースのいずれか、{{HTMLElement("source")}} 要素が指定されていない場合は値または <code>src</code> になります。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">var obj = document.createElement('video'); +console.log(obj.currentSrc); // "" +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-media-currentsrc", "HTMLMediaElement.currentSrc")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>{{SpecName('HTML5 W3C')}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.currentSrc")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.currentSrc")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>HTMLMediaElement.currentTime</code></strong> プロパティは、現在の再生時間を秒単位で示します。 この値を設定すると、メディアは新しい時間にシークされます。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: js">var <em>cTime</em> = <em>video</em>.currentTime; +<em>video</em>.currentTime = 35; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>double 型。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">var video = document.createElement('video'); +console.log(video.currentTime); +</pre> + +<h2 id="Reduced_time_precision" name="Reduced_time_precision">時間精度の引き下げ</h2> + +<p>タイミング攻撃やフィンガープリンティングに対する保護を提供するために、<code>video.currentTime</code> の精度はブラウザーの設定によっては四捨五入される可能性があります。<br> + Firefox では、<code>privacy.reduceTimerPrecision</code> 設定がデフォルトで有効になっており、Firefox 59 ではデフォルトで 20us に設定されていますが、Firefox 60 では 2ms になります。</p> + +<pre class="brush: js">// Firefox 60 における時間精度の引き下げ (2ms) +video.currentTime; +// 23.404 +// 24.192 +// 25.514 +// ... + + +// `privacy.resistFingerprinting` を有効にしての時間精度の引き下げ +video.currentTime; +// 49.8 +// 50.6 +// 51.7 +// ... +</pre> + +<p>Firefox では、<code>privacy.resistFingerprinting</code> を有効にすることもでき、精度は 100ms または <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code> のいずれか大きい方の値になります。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "embedded-content.html#dom-media-currenttime", "HTMLMediaElement.currentTime")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>{{SpecName('HTML5 W3C')}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.currentTime")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.currentTime")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> + <li>時間を設定する別の方法については、<code><a href="/ja/docs/Web/API/HTMLMediaElement/fastSeek">HTMLMediaElement.fastSeek()</a></code> を参照してください。</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>HTMLMediaElement.defaultMuted</code></strong> プロパティは、メディア要素の音声出力をデフォルトでミュートするかどうかを示す、{{htmlattrxref("muted", "video")}} HTML 属性を反映します。 このプロパティは動的な効果はありません。 音声出力をミュートおよびミュート解除するには、{{domxref("HTMLMediaElement.muted", "muted")}} プロパティを使用します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: js">var <em>dMuted</em> = <em>video</em>.defaultMuted; +<em>audio</em>.defaultMuted = true; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{jsxref("Boolean")}}。 値が <code>true</code> の場合、音声出力はデフォルトでミュートされます。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">var videoEle = document.createElement('video'); +videoEle.defaultMuted = true; +console.log(videoEle.outerHTML); // <video muted=""></video> +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-media-defaultmuted", "HTMLMediaElement.defaultMuted")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>{{SpecName('HTML5 W3C')}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.defaultMuted")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.defaultMuted")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> + <li>{{domxref("HTMLMediaElement.muted")}}</li> + <li>{{domxref("HTMLMediaElement.volume")}}</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>HTMLMediaElement.defaultPlaybackRate</code></strong> プロパティは、メディアのデフォルトの再生速度を示します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: js">var <em>dSpeed</em> = <em>video</em>.defaultPlaybackRate; +<em>audio</em>.defaultPlaybackRate = 1.0; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code>double</code> 型。 1.0 が「標準速度」で、1.0 より小さい値はメディアの再生速度を標準より遅くし、値を大きくすると再生速度は速くなります。 値 0.0 は無効で、<code>NOT_SUPPORTED_ERR</code> 例外をスローします。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">var obj = document.createElement('video'); +console.log(obj.defaultPlaybackRate); // 1 +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-media-defaultplaybackrate", "HTMLMediaElement.defaultPlaybackRate")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>{{SpecName('HTML5 W3C')}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.defaultPlaybackRate")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.defaultPlaybackRate")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> +</ul> 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 +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p><span class="seoSummary"><strong><code>HTMLMediaElement.disableRemotePlayback</code></strong> プロパティは、メディア要素がリモート再生 UI を持つことを許可するかどうかを決定します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>remotePlaybackState</em> = <em>element</em>.disableRemotePlayback(); </pre> + +<h3 id="Value" name="Value">値</h3> + +<p>メディア要素にリモート再生 UI があるかどうかを示す {{jsxref("Boolean")}}。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre>var obj = document.createElement('audio'); +obj.disableRemotePlayback = true;</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "#embedded-content-0.html#htmlmediaelement", "disableRemotePlayback")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.HTMLMediaElement.disableRemotePlayback")}}</p> +</div> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>HTMLMediaElement.duration</code></strong> プロパティは、メディアの長さを秒単位で示します。 使用可能なメディアデータがない場合はゼロになります。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: js">var <em>myDuration</em> = <em>audioOrVideo</em>.duration</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code>double</code> 型。 メディアデータは利用可能だが長さが不明な場合、この値は <code>NaN</code> です。 メディアがストリーミングされ、事前定義された長さを持たない場合、値は <code>Inf</code> です。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">var obj = document.createElement('video'); +console.log(obj.duration); // NaN +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-media-duration", "HTMLMediaElement.duration")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.duration")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.duration")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> +</ul> 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 +--- +<p>{{APIRef("HTMLMediaElement")}}</p> + +<p><span class="seoSummary"><code>durationchange</code> イベントは、<code>duration</code> 属性が更新されたときに発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">対象</th> + <td>要素</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">イベントハンドラプロパティ</th> + <td>{{domxref("GlobalEventHandlers.ondurationchange")}}</td> + </tr> + <tr> + <th scope="row">仕様</th> + <td><a class="external" href="https://html.spec.whatwg.org/multipage/media.html#event-media-durationchange">HTML5 メディア</a></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらの例では、<code>HTMLMediaElement</code> の <code>durationchange</code> イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。</p> + +<p><code>AddEventListener()</code> を使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.addEventListener('durationchange', (event) => { + console.log('理由はわかりませんが、動画の再生時間が変わりました。'); +});</pre> + +<p><code>ondurationchange</code> イベントハンドラプロパティを使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.ondurationchange = (event) => { + console.log('理由はわかりませんが、動画の再生時間が変わりました。'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-durationchange", "durationchange media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-durationchange", "durationchange media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.durationchange_event")}}</p> + +<h2 id="Related_Events" name="Related_Events">関連イベント</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing イベント')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough イベント')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate イベント')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play イベント')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend イベント')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied イベント')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled イベント')}}</li> +</ul> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> 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 +--- +<p>{{APIRef("HTMLMediaElement")}}</p> + +<p><span class="seoSummary"><code>emptied</code> イベントは、メディアが空になると発生します。 例えば、このイベントは、メディアがすでに読み込まれている(または部分的に読み込まれている)状態で、それを再読み込みするために <code>load()</code> メソッドを呼び出した場合に送信されます。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">対象</th> + <td>要素</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">イベントハンドラプロパティ</th> + <td>{{domxref("GlobalEventHandlers.onemptied")}}</td> + </tr> + <tr> + <th scope="row">仕様</th> + <td><a class="external" href="https://html.spec.whatwg.org/multipage/media.html#event-media-emptied">HTML5 メディア</a></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらの例では、<code>HTMLMediaElement</code> の <code>emptied</code> イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。</p> + +<p><code>AddEventListener()</code> を使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.addEventListener('emptied', (event) => { + console.log('ええとああ。 メディアが空です。 load() を呼び出しましたか?'); +});</pre> + +<p><code>onemptied</code> イベントハンドラプロパティを使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.onemptied = (event) => { + console.log('ええとああ。 メディアが空です。 load() を呼び出しましたか?'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-emptied", "emptied media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-emptied", "emptied media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.emptied_event")}}</p> + +<h2 id="Related_Events" name="Related_Events">関連イベント</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing イベント')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough イベント')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate イベント')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play イベント')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend イベント')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied イベント')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled イベント')}}</li> +</ul> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>HTMLMediaElement.ended</code></strong> は、メディア要素が再生を終了したかどうかを示します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>isEnded</em> = <em>HTMLMediaElement</em>.ended</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>要素に含まれるメディアの再生が終了した場合に <code>true</code> となる {{jsxref("Boolean")}}。</p> + +<p>メディアのソースが {{domxref("MediaStream")}} の場合、ストリームの {{domxref("MediaStream.active", "active")}} プロパティの値が <code>false</code> の場合、この値は <code>true</code> です。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">var obj = document.createElement('video'); +console.log(obj.ended); // false +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-media-ended", "HTMLMediaElement.ended")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.ended")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.ended")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> + <li>{{domxref("MediaStream")}}</li> + <li>{{domxref("MediaStream.active")}}</li> +</ul> 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 +--- +<p>{{APIRef("HTMLMediaElement")}}</p> + +<p><span class="seoSummary"><code>ended</code> イベントは、メディアの終わりに達したため、またはそれ以上利用できるデータがないために再生またはストリーミングが停止したときに発生します。 </span>このイベントは、メディアの再生がメディアの最後に到達して終了した {{domxref("HTMLMediaElement")}}({{HTMLElement("audio")}} および {{HTMLElement("video")}})に基づいて発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">対象</th> + <td>要素</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">イベントハンドラプロパティ</th> + <td>{{domxref("GlobalEventHandlers.onended")}}</td> + </tr> + <tr> + <th scope="row">仕様</th> + <td><a class="external" href="https://html.spec.whatwg.org/multipage/media.html#event-media-ended">HTML5 メディア</a></td> + </tr> + </tbody> +</table> + +<ul> +</ul> + +<div class="note"> +<p>このイベントは、<a href="/ja/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a> および <a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> でも定義されています。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらの例では、<code>HTMLMediaElement</code> の <code>ended</code> イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。</p> + +<p><code>AddEventListener()</code> を使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.addEventListener('ended', (event) => { + console.log('1)動画が終了した、または 2)それ以上データがない' + + 'ため、動画が停止しました。'); +});</pre> + +<p><code>onended</code> イベントハンドラプロパティを使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.onended = (event) => { + console.log('1)動画が終了した、または 2)それ以上データがない' + + 'ため、動画が停止しました。'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-ended", "ended media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-ended", "ended media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.ended_event")}}</p> + +<h2 id="Related_Events" name="Related_Events">関連イベント</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing イベント')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough イベント')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate イベント')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play イベント')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend イベント')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied イベント')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled イベント')}}</li> +</ul> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> + <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a> + <ul> + <li><a href="/ja/docs/Web/API/MediaStreamTrack/ended_event">MediaStreamTrack: ended イベント</a></li> + </ul> + </li> + <li><a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> + <ul> + <li><a href="/ja/docs/Web/API/AudioScheduledSourceNode/ended_event">AudioScheduledSourceNode: ended イベント</a></li> + </ul> + </li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>HTMLMediaElement.error</code></strong> は最新のエラーの {{domxref("MediaError")}} オブジェクトです。 エラーが発生していない場合は <code>null</code> です。 要素が {{event("error")}} イベントを受け取ったら、このオブジェクトを調べることによって何が起こったのかについての詳細を決定することができます。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>myError</em> = <em>HTMLMediaElement</em>.error;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>メディア要素で発生した最新のエラーを説明する {{domxref("MediaError")}} オブジェクト。 エラーが発生していない場合は <code>null</code>。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では動画要素を設けて、それにエラーハンドラを追加しています。 エラーハンドラは単に詳細をコンソールに記録します。</p> + +<pre class="brush: js">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"; +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-media-error", "HTMLMediaElement.error")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.error")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.error")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> + <li>{{HTMLElement("audio")}} と {{HTMLElement("video")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><strong><code>error</code></strong> イベントは、リソースがエラーのために読み込めなかったときに発生します (例えば、ネットワーク接続の問題など)。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onerror", "onerror")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js">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);</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-error")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-error")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.HTMLMediaElement.error_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>HTMLMediaElement</code></strong> インターフェイスは、 {{domxref("HTMLElement")}} に音声や動画で一般的なメディアに関する基本的な能力の対応に必要なプロパティやメソッドを追加します。</span> {{domxref("HTMLVideoElement")}} および {{domxref("HTMLAudioElement")}} 要素はどちらも、このインターフェイスを継承しています。</p> + +<p>{{InheritanceDiagram(600, 120)}}</p> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<p><em>このインターフェイスは祖先である {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}}, {{domxref("EventTarget")}} のプロパティを継承しています。</em></p> + +<dl> + <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt> + <dd>{{domxref("AudioTrackList")}} で、この要素に含まれる {{domxref("AudioTrack")}} オブジェクトを列挙します。</dd> + <dt>{{domxref("HTMLMediaElement.autoplay")}}</dt> + <dd>{{jsxref("Boolean")}} で、 HTML の {{htmlattrxref("autoplay", "video")}} 属性の値を反映し、再生に十分なデータが揃った時点で自動的に再生を始めるかどうかを示します。 + <div class="note"><strong>メモ</strong>: オーディオ(またはオーディオトラックを含むビデオ)を自動的に再生するサイトは、ユーザーにとって不快なエクスペリエンスになる可能性があるため、可能な限り避ける必要があります。 自動再生機能を実装する必要がある場合、オプトイン(ユーザーに明示的に有効にすること)する必要があります。 ただし、ソースが後でユーザー制御下で実行されるメディア要素をプレ作成する場合、これは便利です。</div> + </dd> + <dt>{{domxref("HTMLMediaElement.buffered")}} {{readonlyinline}}</dt> + <dd>その時点でブラウザがバッファしたメディアデータの範囲を表す {{domxref("TimeRanges")}} オブジェクトを取得できます。</dd> + <dt>{{domxref("HTMLMediaElement.controller")}}</dt> + <dd>要素に割り当てられた {{domxref("MediaController")}} オブジェクトを参照できます。割り当てられていない場合の値は <code>null</code> です。</dd> + <dt>{{domxref("HTMLMediaElement.controls")}}</dt> + <dd>再生をコントロールするユーザインタフェースの表示 / 非表示を指定する{{htmlattrxref("controls", "video")}} 属性を、{{jsxref('Boolean')}} で参照できます。</dd> + <dt>{{domxref("HTMLMediaElement.controlsList")}} {{readonlyinline}}</dt> + <dd>ユーザーエージェントが独自のコントロールセットを表示するたびに、メディア要素に表示するコントロールをユーザーエージェントが選択するのに役立つ{{domxref("DOMTokenList")}}を返します。 <code>DOMTokenList</code>は、<code>nodownload</code>、<code>nofullscreen</code>、<code>noremoteplayback</code>の3つの値のうち1つ以上を取ります。</dd> + <dt>{{domxref("HTMLMediaElement.crossOrigin")}}</dt> + <dd>このメディア要素の <a href="/docs/Web/HTML/CORS_settings_attributes">CORS 設定</a> を {{domxref("DOMString")}} で参照できます。</dd> + <dt>{{domxref("HTMLMediaElement.currentSrc")}}{{readonlyinline}}</dt> + <dd>選択されたメディアリソースの絶対 URL を {{domxref("DOMString")}} で返します。</dd> + <dt>{{domxref("HTMLMediaElement.currentTime")}}</dt> + <dd>現在の再生時間を <code>double</code> で返します。値を代入することで、シークを行えます。</dd> + <dt>{{domxref("HTMLMediaElement.defaultMuted")}}</dt> + <dd>標準状態で音声がミュートされているか、いないかを表す、HTML の {{htmlattrxref("muted", "video")}} 属性を {{jsxref('Boolean')}} で参照できます。</dd> + <dt>{{domxref("HTMLMediaElement.defaultPlaybackRate")}}</dt> + <dd>標準の再生レートを <code>double</code> で返します。</dd> + <dt>{{domxref("HTMLMediaElement.disableRemotePlayback")}}</dt> + <dd>リモート再生ができるかどうかを{{jsxref('Boolean')}}で取得できます。メディア要素にリモート再生UIを許可するかどうかを返します。</dd> + <dt>{{domxref("HTMLMediaElement.duration")}}{{readonlyinline}}</dt> + <dd>メディアの長さを秒数で表した数値を <code>double</code> で取得できます。メディアデータがない場合は、0 を返します。</dd> + <dt>{{domxref("HTMLMediaElement.ended")}}{{readonlyinline}}</dt> + <dd>再生が終了しているか、いないかを {{jsxref('Boolean')}} で取得できます。</dd> + <dt>{{domxref("HTMLMediaElement.error")}}{{readonlyinline}}</dt> + <dd>一番最後に起きたエラーを {{domxref("MediaError")}} オブジェクトとして返します。エラーが起きていない場合は null を返します。</dd> + <dt>{{domxref("HTMLMediaElement.loop")}}</dt> + <dd>繰り返し再生を有効、無効を表す HTML の {{htmlattrxref("loop", "video")}} を{{jsxref('Boolean')}} として参照できます。</dd> + <dt>{{domxref("HTMLMediaElement.mediaGroup")}}</dt> + <dd>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')}}.</dd> + <dt>{{domxref("HTMLMediaElement.mediaKeys")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Returns a {{domxref("MediaKeys")}} object or <code>null</code>. MediaKeys is a set of keys that an associated HTMLMediaElement can use for decryption of media data during playback.</dd> + <dt>{{domxref("HTMLMediaElement.mozAudioCaptured")}} {{readonlyinline}} {{non-standard_inline}}</dt> + <dd>Returns a {{jsxref('Boolean')}}. Related to audio stream capture.</dd> + <dt>{{domxref("HTMLMediaElement.mozFragmentEnd")}} {{non-standard_inline}}</dt> + <dd>Is a <code>double</code> that provides access to the fragment end time if the media element has a fragment URI for <code>currentSrc</code>, otherwise it is equal to the media duration.</dd> + <dt>{{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd> + <p>Is a <code>unsigned long</code> that indicates the number of samples that will be returned in the framebuffer of each <code>MozAudioAvailable</code> 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).</p> + + <p>The <code>mozFrameBufferLength</code> property can be set to a new value for lower latency, larger amounts of data, etc. The size given <em>must</em> 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 <a href="/en-US/docs/Web/Events/loadedmetadata">loadedmetadata</a> event fires, when the audio info is known, but before the audio has started or <code>MozAudioAvailable</code> events have begun firing.</p> + </dd> + <dt>{{domxref("HTMLMediaElement.mozSampleRate")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Returns a <code>double</code> 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.</dd> + <dt>{{domxref("HTMLMediaElement.muted")}}</dt> + <dd>Is a {{jsxref('Boolean')}} that determines whether audio is muted. <code>true</code> if the audio is muted and <code>false</code> otherwise.</dd> + <dt>{{domxref("HTMLMediaElement.networkState")}} {{readonlyinline}}</dt> + <dd>Returns a <code>unsigned short</code> (enumeration) indicating the current state of fetching the media over the network.</dd> + <dt>{{domxref("HTMLMediaElement.paused")}} {{readonlyinline}}</dt> + <dd>Returns a {{jsxref('Boolean')}} that indicates whether the media element is paused.</dd> + <dt>{{domxref("HTMLMediaElement.playbackRate")}}</dt> + <dd>Is a <code>double</code> that indicates the rate at which the media is being played back.</dd> + <dt>{{domxref("HTMLMediaElement.played")}} {{readonlyinline}}</dt> + <dd>Returns a {{domxref('TimeRanges')}} object that contains the ranges of the media source that the browser has played, if any.</dd> + <dt>{{domxref("HTMLMediaElement.preload")}}</dt> + <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("preload", "video")}} HTML attribute, indicating what data should be preloaded, if any. Possible values are: <code>none</code>, <code>metadata</code>, <code>auto</code>.</dd> + <dt>{{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}}</dt> + <dd>Is a {{jsxref('Boolean')}} that determines if the pitch of the sound will be preserved. If set to <code>false</code>, the pitch will adjust to the speed of the audio. This is implemented with prefixes in Firefox (<code>mozPreservesPitch</code>) and WebKit (<code>webkitPreservesPitch</code>).</dd> + <dt>{{domxref("HTMLMediaElement.readyState")}} {{readonlyinline}}</dt> + <dd>Returns a <code>unsigned short</code> (enumeration) indicating the readiness state of the media.</dd> + <dt>{{domxref("HTMLMediaElement.seekable")}} {{readonlyinline}}</dt> + <dd>Returns a {{domxref('TimeRanges')}} object that contains the time ranges that the user is able to seek to, if any.</dd> + <dt>{{domxref("HTMLMediaElement.seeking")}} {{readonlyinline}}</dt> + <dd>Returns a {{jsxref('Boolean')}} that indicates whether the media is in the process of seeking to a new position.</dd> + <dt>{{domxref("HTMLMediaElement.sinkId")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>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 <code>MediaDeviceInfo.deviceid</code> values returned from {{domxref("MediaDevices.enumerateDevices()")}}, <code>id-multimedia</code>, or <code>id-communications</code>.</dd> + <dt>{{domxref("HTMLMediaElement.src")}}</dt> + <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "video")}} HTML attribute, which contains the URL of a media resource to use.</dd> + <dt>{{domxref("HTMLMediaElement.srcObject")}}</dt> + <dd>Is a {{domxref('MediaStream')}} representing the media to play or that has played in the current <code>HTMLMediaElement</code>, or <code>null</code> if not assigned.</dd> + <dt>{{domxref("HTMLMediaElement.textTracks")}} {{readonlyinline}}</dt> + <dd>Returns the list of {{domxref("TextTrack")}} objects contained in the element.</dd> + <dt>{{domxref("HTMLMediaElement.videoTracks")}} {{readonlyinline}}</dt> + <dd>要素の持つ {{domxref("VideoTrack")}} オブジェクトのリストを参照できます。 + <div class="note"> + <p>Gecko は 1 トラックの再生のみをサポートします。また複数トラックのメタデータ解析は、 Ogg フォーマットの場合にのみ有効です。</p> + </div> + </dd> + <dt>{{domxref("HTMLMediaElement.volume")}}</dt> + <dd>音量を <code>double</code> で取得できます。この値は 0.0 (無音) 以上、1.0 (最大) 以下でなくてはなりません。</dd> +</dl> + +<h3 id="Event_handlers" name="Event_handlers">イベントハンドラー</h3> + +<dl> + <dt>{{domxref("HTMLMediaElement.onencrypted")}}</dt> + <dd>メディアが暗号化されている場合に呼ばれる {{domxref('EventHandler')}} を設定できます。</dd> + <dt>{{domxref("HTMLMediaElement.onwaitingforkey")}}</dt> + <dd>Sets the {{domxref('EventHandler')}} called when playback is blocked while waiting for an encryption key.</dd> +</dl> + +<h2 id="Obsolete_attributes" name="Obsolete_attributes">廃止された属性</h2> + +<p>These attributes are obsolete and should not be used, even if a browser still supports them.</p> + +<dl> + <dt>{{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd><code>double</code> で、初期再生位置を示す値を秒単位で返します。</dd> + <dt>{{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Returns a <code>double</code> representing the number of channels in the audio resource (e.g., <code>2</code> for stereo).</dd> +</dl> + +<h3 id="Obsolete_event_handlers" name="Obsolete_event_handlers">廃止されたイベントハンドラー</h3> + +<dl> + <dt>{{domxref("HTMLMediaElement.onmozinterruptbegin")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>オーディオチャンネルマネージャによってメディア要素が割り込まれたときに呼び出される {{domxref("EventHandler")}} を設定します。これは Firefox 固有のもので、 Firefox OS のために実装されていましたが、 Firefox 55 で削除されました。</dd> + <dt>{{domxref("HTMLMediaElement.onmozinterruptend")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>割り込みが完了したときに呼び出される {{domxref('EventHandler')}} を設定します。これは Firefox 固有のもので、 Firefox OS のために実装されていましたが、 Firefox 55 で削除されました。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<p><em>このインターフェイスは祖先である {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}}, {{domxref("EventTarget")}} のメソッドを継承しています。</em></p> + +<dl> + <dt>{{domxref("HTMLMediaElement.addTextTrack()")}}</dt> + <dd>字幕向けトラックのような、テキストトラックを追加します。</dd> + <dt>{{domxref("HTMLMediaElement.captureStream()")}} {{experimental_inline}}</dt> + <dd>Returns {{domxref("MediaStream")}}, captures a stream of the media content.</dd> + <dt>{{domxref("HTMLMediaElement.canPlayType()")}}</dt> + <dd>メディアタイプが再生可能かどうかを判定します。</dd> + <dt>{{domxref("HTMLMediaElement.fastSeek()")}}</dt> + <dd>指定された時間へシークします。</dd> + <dt>{{domxref("HTMLMediaElement.load()")}}</dt> + <dd>メディア要素をリセットし、メディアリソースをリスタートします。処理されなかったイベントは破棄されます。メディアデータがダウンロードされる量は <code>preload </code>属性の値に影響されます。<code>src </code>属性の値、もしくは <code>source </code>要素内の要素を削除した際のリソース解放、もしくは <code>source </code>の子要素が動的に変更される場合の再スキャンのために利用します。それ以外の場合に呼びだす必要はありません。</dd> + <dt>{{domxref("HTMLMediaElement.mozCaptureStream()")}} {{non-standard_inline}}</dt> + <dd>[enter description]</dd> + <dt>{{domxref("HTMLMediaElement.mozCaptureStreamUntilEnded()")}} {{non-standard_inline}}</dt> + <dd>[enter description]</dd> + <dt>{{domxref("HTMLMediaElement.mozGetMetadata()")}} {{non-standard_inline}}</dt> + <dd>再生中のメディアデータに対するメタデータを {{jsxref('Object')}} として返します。呼び出すたびに、オブジェクトのコピーが新しく作られます。このメソッドを呼び出すには、<a href="/en-US/docs/Web/Events/loadedmetadata">loadedmetadata</a> イベント発火している必要があります。</dd> + <dt>{{domxref("HTMLMediaElement.pause()")}}</dt> + <dd>再生を一時停止します。</dd> + <dt>{{domxref("HTMLMediaElement.play()")}}</dt> + <dd>再生を開始します。</dd> + <dt>{{domxref("HTMLMediaElement.seekToNextFrame()")}} {{non-standard_inline}} {{experimental_inline}}</dt> + <dd>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.</dd> + <dt>{{domxref("HTMLMediaElement.setMediaKeys()")}} {{experimental_inline}}</dt> + <dd>再生に利用する{{domxref("MediaKeys")}} を指定します。{{jsxref("Promise")}} オブジェクトを返します。</dd> + <dt>{{domxref("HTMLMediaElement.setSinkId()")}} {{experimental_inline}}</dt> + <dd>音声出力をレンダリングするデバイスの ID を指定できます。指定はアプリケーションからの利用が許されている場合に有効です。なお返り値は {{jsxref("Promise")}} オブジェクトとなっています。</dd> +</dl> + +<h2 id="Obsolete_methods" name="Obsolete_methods">廃止されたメソッド</h2> + +<p>These methods are obsolete and should not be used, even if a browser still supports them.</p> + +<dl> + <dt>{{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>このメソッドは Mozilla の独自実装で、他のメディア要素からデータをロードします。通常のリソース選択のアルゴリズムではなく、他の要素の <code>currentSrc </code>を選ぶ点以外は、 <code>load() </code>メソッドと同じように振る舞います。これは他の要素がキャッシュし、バッファしているデータを利用することにより最適化を図るためです。実際に、2 つの要素が同じダウンロードデータを利用する場合、どちらか一方のダウンロードが終われば、他方でもそのデータを利用できるようになります。</dd> +</dl> + +<h2 id="Events" name="Events">イベント</h2> + +<p><em>Inherits methods from its parent, {{domxref("HTMLElement")}} </em>, defined in the {{domxref('GlobalEventHandlers')}} mixin. Listen to these events using <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> + +<dl> + <dt>{{domxref("HTMLMediaElement.abort_event", 'abort')}}</dt> + <dd>Fired when the resource was not fully loaded, but not as the result of an error.</dd> + <dt>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</dt> + <dd>Fired when the user agent can play the media, but estimates that <strong>not</strong> enough data has been loaded to play the media up to its end without having to stop for further buffering of content</dd> + <dt>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</dt> + <dd>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.</dd> + <dt>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</dt> + <dd>Fired when the duration attribute has been updated.</dd> + <dt>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</dt> + <dd>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.</dd> + <dt>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</dt> + <dd>Fired when playback stops when end of the media (<audio> or <video>) is reached or because no further data is available.</dd> + <dt>{{domxref("HTMLMediaElement.error_event", 'error')}}</dt> + <dd>Fired when the resource could not be loaded due to an error.</dd> + <dt>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</dt> + <dd>Fired when the first frame of the media has finished loading.</dd> + <dt>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</dt> + <dd>Fired when the metadata has been loaded</dd> + <dt>{{domxref("HTMLMediaElement.loadstart_event", 'loadstart')}}</dt> + <dd>Fired when the browser has started to load a resource.</dd> + <dt>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</dt> + <dd>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.</dd> + <dt>{{domxref("HTMLMediaElement.play_event", 'play')}}</dt> + <dd>Fired when when the <code>paused</code> property is changed from <code>true</code> to <code>false</code>, as a result of the {{domxref("HTMLMediaElement.play()")}} method, or the <code>autoplay</code> attribute</dd> + <dt>{{domxref("HTMLMediaElement.playing_event", "playing")}}</dt> + <dd>Fired when playback is ready to start after having been paused or delayed due to lack of data</dd> + <dt>{{domxref("HTMLMediaElement.progress_event", "progress")}}</dt> + <dd>Fired periodically as the browser loads a resource.</dd> + <dt>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</dt> + <dd>Fired when the playback rate has changed.</dd> + <dt>{{domxref("HTMLMediaElement.seeked_event", 'seeked ')}}</dt> + <dd>Fired when a seek operation completes</dd> + <dt>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</dt> + <dd>Fired when a seek operation begins</dd> + <dt>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</dt> + <dd>Fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</dd> + <dt>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</dt> + <dd>Fired when the media data loading has been suspended.</dd> + <dt>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</dt> + <dd>Fired when the time indicated by the currentTime attribute has been updated</dd> + <dt>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</dt> + <dd>Fired when the volume has changed.</dd> + <dt>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</dt> + <dd>Fired when playback has stopped because of a temporary lack of data</dd> +</dl> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Media Capture','#htmlmediaelement-extensions','HTMLMediaElement')}}</td> + <td>{{Spec2('Media Capture')}}</td> + <td>Adds <code>sinkId</code> and <code>setSinkId()</code>, and <code>captureStream()</code>.</td> + </tr> + <tr> + <td>{{SpecName('EME', '#introduction', 'Encrypted Media Extensions')}}</td> + <td>{{Spec2('EME')}}</td> + <td>Adds {{domxref("MediaKeys")}}, {{domxref("MediaEncryptedEvent")}}, {{domxref("setMediaKeys")}}, {{domxref("onencrypted")}}, and {{domxref("onwaitingforkey")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>{{SpecName('HTML5 W3C')}} からの変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.HTMLMediaElement")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>参考文献 + <ul> + <li>{{HTMLElement("video")}} および {{HTMLElement("audio")}}</li> + <li>このインタフェースを継承している{{domxref("HTMLVideoElement")}} と {{domxref("HTMLAudioElement")}}</li> + </ul> + </li> + <li>記事 + <ul> + <li><a class="internal" href="/docs/Using_HTML5_audio_and_video">HTML5 での音声と動画の利用</a></li> + <li><a class="internal" href="/ja/docs/Media_formats_supported_by_the_audio_and_video_elements">audio 要素と video 要素が対応しているメディア形式</a></li> + <li><a href="/ja/docs/Web_Audio_API">Web Audio API</a></li> + </ul> + </li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary">{{domxref("HTMLMediaElement")}} の <strong><code>load()</code></strong> メソッドは、メディア要素をその初期状態にリセットし、再生を開始する準備としてメディアソースを選択してメディアを読み込むプロセスを開始します。</span> プリフェッチされるメディアデータの量は、要素の {{htmlattrxref("preload", "video")}} 属性の値によって決まります。</p> + +<p>このメソッドは通常、要素の {{htmlattrxref("src", "video")}} 属性を変更するか、メディア要素自体の中にネストされている {{HTMLElement("source")}} 要素を追加または削除することによって、メディア要素に使用可能な一連のソースを動的に変更した場合にのみ役立ちます。 <code>load()</code> は要素をリセットして利用可能なソースを再スキャンし、それによって変更を有効にします。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>mediaElement</em>.load();</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<p>無し。</p> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p><code>undefined</code>。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p><code>load()</code> を呼び出すと、このメディア要素を含む進行中のすべての操作が中止され、{{HTMLElement("audio")}} 要素または {{HTMLElement("video")}} 要素で指定されたオプションとその {{htmlattrxref("src", "video")}} 属性または子の {{HTMLElement("source")}} 要素を指定して適切なメディアリソースの選択と読み込みのプロセスが開始されます。 これについては、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a>の<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content#Supporting_multiple_formats">複数フォーマットのサポート</a>で詳しく説明しています。</p> + +<p>進行中のアクティビティを中止するプロセスにより、{{domxref("HTMLMediaElement.play", "play()")}} によって返された未処理の {{jsxref("Promise")}} が、新しいメディアの読み込みが開始される前に、そのステータスに基づいて適切に解決または拒否されます。 保留中の play の promises は <code>"AbortError"</code> {{domxref("DOMException")}} で中止されます。</p> + +<p>読み込みプロセスが進むにつれて、次のように適切なイベントがメディア要素自体に送信されます。</p> + +<ul> + <li>要素がすでにメディアの読み込み処理中の場合、その読み込み処理は中止され、<strong>{{event("abort")}}</strong> イベントが送信されます。</li> + <li>要素がすでにメディアで初期化されている場合は、<strong>{{event("emptied")}}</strong> イベントが送信されます。</li> + <li>再生位置をメディアの先頭にリセットすると、実際に再生位置が変更された場合(つまり、まだ先頭になっていない場合)、<strong>{{event("timeupdate")}}</strong> イベントが送信されます。</li> + <li>メディアが選択され、読み込みの開始準備が整うと、<strong>{{event("loadstart")}}</strong> イベントが配信されます。</li> + <li>これ以降は、メディアの読み込みと同じようにイベントが送信されます。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、ドキュメント内の {{HTMLElement("video")}} 要素を見つけて、<code>load()</code> を呼び出してそれをリセットします。</p> + +<pre class="brush: js">var mediaElem = document.querySelector("video"); +mediaElem.load(); +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#dom-media-load", "HTMLMediaElement.load()")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初期定義</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "semantics-embedded-content.html#dom-htmlmediaelement-load", "HTMLMediaElement.load()")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.load")}}</p> 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 +--- +<div>{{APIRef("HTMLMediaElement")}}</div> + +<p><span class="seoSummary"><strong><code>loadeddata</code></strong> イベントは、メディアの現在の再生位置のフレームの読み込みが完了したときに発生します。ふつうは最初のフレームです。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">対象</th> + <td>Element</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.onloadeddata")}}</td> + </tr> + <tr> + <th scope="row">仕様書</th> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p>なお、このイベントはモバイルやタブレットにおいて、ブラウザーの設定でデータセーバーがオンになっていると発生しません。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらの例では、 HTMLMediaElement の <code>loadeddata</code> イベントにイベントリスナーを追加し、イベントが発生してイベントハンドラーが動作したときにメッセージを投稿します。</p> + +<p><code>addEventListener()</code> の使用:</p> + +<pre class="brush: js">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.'); +});</pre> + +<p><code>onloadeddata</code> イベントハンドラープロパティの使用:</p> + +<pre class="brush: js">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.'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-loadeddata", "loadeddata media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-loadeddata", "loadeddata media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.HTMLMediaElement.loadeddata_event")}}</p> + +<h2 id="Related_Events" name="Related_Events">関連イベント</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing イベント')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough イベント')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate イベント')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play イベント')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend イベント')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied イベント')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled イベント')}}</li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> 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 +--- +<p>{{APIRef("HTMLMediaElement")}}</p> + +<p><span class="seoSummary"><code>loadedmetadata</code> イベントは、メタデータが読み込まれたときに発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">対象</th> + <td>Element</td> + </tr> + <tr> + <th scope="row">Default Action</th> + <td>要素</td> + </tr> + <tr> + <th scope="row">イベントハンドラプロパティ</th> + <td>{{domxref("GlobalEventHandlers.onloadedmetadata")}}</td> + </tr> + <tr> + <th scope="row">仕様</th> + <td><a class="external" href="https://html.spec.whatwg.org/multipage/media.html#event-media-loadedmetadata">HTML5 メディア</a></td> + </tr> + </tbody> +</table> + +<h2 id="Additional_Properties" name="Additional_Properties">追加のプロパティ</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">プロパティ</th> + <th scope="col">型</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>mozChannels</code> {{readonlyInline}}</td> + <td>int</td> + <td>チャンネル数。</td> + </tr> + <tr> + <td><code>mozSampleRate</code> {{readonlyInline}}</td> + <td>int</td> + <td>1秒あたりのサンプルレート。</td> + </tr> + <tr> + <td><code>mozFrameBufferLength</code> {{readonlyInline}}</td> + <td>int</td> + <td>すべてのチャンネルで収集されたサンプルの数。</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらの例では、<code>HTMLMediaElement</code> の <code>loadedmetadata</code> イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。</p> + +<p><code>AddEventListener()</code> を使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.addEventListener('loadedmetadata', (event) => { + console.log('メディアとトラックの' + ' + 長さと寸法は現在わかっています。'); +});</pre> + +<p><code>onloadedmetadata</code> イベントハンドラプロパティを使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.onloadedmetadata = (event) => { + console.log('メディアとトラックの' + ' + 長さと寸法は現在わかっています。'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-loadedmetadata", "loadedmetadata media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-loadedmetadata", "loadedmetadata media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.loadedmetadata_event")}}</p> + +<h2 id="Related_Events" name="Related_Events">関連イベント</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing イベント')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough イベント')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate イベント')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play イベント')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend イベント')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied イベント')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled イベント')}}</li> +</ul> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> + +<ul> + <li>このイベントは gecko の <a href="/ja/docs/Introducing_the_Audio_API_Extension">Audio API 拡張</a>の一部です。</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><strong><code>loadstart</code></strong> イベントは、ブラウザーがリソースの読み込みを開始したときに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onloadstart", "onloadstart")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Live_example" name="Live_example">ライブデモ</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: 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></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.event-log-contents { + width: 18rem; + height: 5rem; + border: 1px solid black; + margin: .2rem; + padding: .2rem; +} + +.example { + display: grid; + grid-template-areas: + "button log" + "video log"; +} + +button { + grid-area: button; + width: 10rem; + margin: .5rem 0; +} + +video { + grid-area: video; +} + +.event-log { + grid-area: log; +} + +.event-log>label { + display: block; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: 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); + } +});</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '200px') }}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-loadstart", "loadstart media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-loadstart", "loadstart media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.HTMLMediaElement.loadstart_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>HTMLMediaElement.loop</code></strong> プロパティは、{{htmlattrxref("loop", "video")}} HTML 属性を反映します。 これは、メディア要素が最後に到達したときに最初からやり直すかどうかを制御します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: js">var <em>loop</em> = <em>video</em>.loop; +<em>audio</em>.loop = true; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{jsxref("Boolean")}}。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">var obj = document.createElement('video'); +obj.loop = true; // true +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-media-loop", "HTMLMediaElement.loop")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.loop")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.loop")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary">HTMLMediaElement.mediaGroup プロパティは、{{htmlattrxref("mediaGroup", "video")}} HTML 属性を反映します。 これは、それが属する要素のグループの名前を示します。 メディア要素のグループは、共通の <code>controller</code> を共有します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: js"><em>...</em></pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("DOMString")}}。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">... +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.mediaGroup")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.mediaGroup")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>HTMLMediaElement.muted</code></strong> は、メディア要素がミュートしているかどうかを示します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>isMuted</em> = <em>audioOrVideo</em>.muted +<em>audio</em>.muted = true;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{jsxref("Boolean")}}。 <code>true</code> はミュートしていることを意味し、<code>false</code> はミュートしていないことを意味します。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">var obj = document.createElement('video'); +console.log(obj.muted); // false +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-media-muted", "HTMLMediaElement.muted")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.muted")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.muted")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> + <li>{{domxref("HTMLMediaElement.defaultMuted")}}</li> + <li>{{domxref("HTMLMediaElement.volume")}}</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>HTMLMediaElement.networkState</code></strong> プロパティは、ネットワークを介したメディアの現在の取得状況を示します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var networkState = audioOrVideo.networkState;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code>unsigned short</code> 型。 可能な値は次のとおりです。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">定数</th> + <th scope="col">値</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>NETWORK_EMPTY</code></td> + <td>0</td> + <td>まだデータがありません。 また、<code>readyState</code> は <code>HAVE_NOTHING</code> です。</td> + </tr> + <tr> + <td><code>NETWORK_IDLE</code></td> + <td>1</td> + <td><code>HTMLMediaElement</code> はアクティブで、リソースを選択しましたが、ネットワークを使用していません。</td> + </tr> + <tr> + <td><code>NETWORK_LOADING</code></td> + <td>2</td> + <td>ブラウザーは <code>HTMLMediaElement</code> のデータをダウンロードしています。</td> + </tr> + <tr> + <td><code>NETWORK_NO_SOURCE</code></td> + <td>3</td> + <td><code>HTMLMediaElement</code> の <code>src</code> が見つかりません。</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、音声要素が再生を開始するのを待機してから、まだデータを読み込んでいるかどうかを確認します。</p> + +<pre class="brush: html"><audio id="example" preload="auto"> + <source src="sound.ogg" type="audio/ogg" /> +</audio> +</pre> + +<pre class="brush: js">var obj = document.getElementById('example'); + +obj.addEventListener('playing', function() { + + if (obj.networkState === 2) { + // 読み込み中... + } + +}); +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-media-networkstate", "HTMLMediaElement.networkState")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.networkState")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.networkState")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>{{domxref("HTMLMediaElement")}} インターフェースの <strong><code>onerror</code></strong> プロパティは、{{event("error")}} イベントを処理するための {{domxref("EventHandler")}} です。</p> + +<p><code>error</code> イベントは、メディアを読み込んだり実行しようとしたときに何らかのエラーが発生したときに発生します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>HTMLMediaElement</em>.onerror = <em>EventListener</em>;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{event("error")}} イベントのイベントハンドラとして機能する {{jsxref("function")}}。 エラーが発生すると、指定した関数が呼び出されます。 <code>null</code> の場合、エラーハンドラは無効です。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onerror','onerror')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.onerror")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLMediaElement")}}</li> + <li>{{HTMLElement("audio")}} と {{HTMLElement("video")}}</li> +</ul> 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 +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p><span class="seoSummary"><strong><code>HTMLMediaElement.pause()</code></strong> メソッドはメディアの再生を一時停止します。 メディアがすでに一時停止状態にある場合、このメソッドは効果がありません。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>HTMLMediaElement</em>.pause()</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<p>無し。</p> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p>無し。</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<p>無し。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>仕様</th> + <th>状態</th> + <th>コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-pause', 'pause()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初期定義; リビング仕様</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','embedded-content-0.html#dom-media-pause','pause()')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.pause")}}</p> 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 +--- +<div>{{APIRef("HTMLMediaElement")}}</div> + +<p><span class="seoSummary"><code>pause</code> イベントは、動作の一時停止のリクエストが処理され、動作が一時状態に入ったときに送信されるものであり、メディアが要素の {{domxref("HTMLMediaElement.pause", "pause()")}} の呼び出しを通して一時停止した後が最も一般的です。</span>イベントは <code>pause()</code> メソッドから戻り、メディア要素の {{domxref("HTMLMediaElement.paused", "paused")}} プロパティが <code>true</code> に変化した後で一度送信されます。</p> + +<h2 id="General_info" name="General_info">基本情報</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">対象</th> + <td>Element</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.onpause")}}</td> + </tr> + <tr> + <th scope="row">仕様書</th> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらの例は、 HTMLMediaElement の <code>pause</code> イベントにイベントリスナーを追加してから、イベントが発生したことでイベントハンドラーが動作したときにメッセージをポストします。</p> + +<p><code>addEventListener()</code> を使用した例:</p> + +<pre class="brush: js">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.'); +});</pre> + +<p><code>onpause</code> イベントハンドラープロパティを使用した例:</p> + +<pre class="brush: js">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.'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-pause", "pause media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-pause", "pause media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.HTMLMediaElement.pause_event")}}</p> + +<h2 id="Related_Events" name="Related_Events">関連イベント</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing イベント')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough イベント')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate イベント')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play イベント')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend イベント')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied イベント')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled イベント')}}</li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> + <li>{{domxref("SpeechSynthesisUtterance")}}</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary">読み取り専用の <strong><code>HTMLMediaElement.paused</code></strong> プロパティは、メディア要素を一時停止しているかどうかを示します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>isPaused</em> = <em>audioOrVideo</em>.paused</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{jsxref("Boolean")}}。 <code>true</code> は一時停止中で、<code>false</code> は一時停止していません。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">var obj = document.createElement('video'); +console.log(obj.paused); // true +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-media-paused", "HTMLMediaElement.paused")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.paused")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.paused")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary">{{domxref("HTMLMediaElement")}} の <strong><code>play()</code></strong> メソッドは、メディアの再生を開始しようとします。 再生が正常に開始されると解決する {{jsxref("Promise")}} を返します。</span> パーミッションの問題など、何らかの理由で再生を開始しなかった場合、その promise は拒否されます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>promise</em> = <em>HTMLMediaElement</em>.play();</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<p>無し。</p> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p>再生が開始されたときに解決される、または何らかの理由で再生を開始できない場合は拒否される {{jsxref("Promise")}}。</p> + +<div class="note"> +<p><strong>注</strong>: 古いブラウザーは <code>play()</code> から値を返さないかもしれません。</p> +</div> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<p>promise の<strong>拒否ハンドラ</strong>(rejection handler)は、その唯一の入力パラメータとして渡された例外名で呼び出されます(従来の例外がスローされるのとは対照的に)。 考えられるエラーは次のとおりです。</p> + +<dl> + <dt><code>NotAllowedError</code></dt> + <dd>ユーザーエージェント(ブラウザー)またはオペレーティングシステムは、現在のコンテキストまたはシチュエーションではメディアの再生を許可していません。 これは、例えば、「再生」ボタンをクリックすることによってメディアの再生を明示的に開始することをブラウザーがユーザーに要求する場合に起こり得ます。</dd> + <dt><code>NotSupportedError</code></dt> + <dd>メディアソース({{domxref("MediaStream")}}、{{domxref("MediaSource")}}、{{domxref("Blob")}}、{{domxref("File")}} など)はサポートしているメディア形式を表していません。</dd> +</dl> + +<p>ブラウザーの実装の詳細、メディアプレーヤーの実装などによっては、他の例外が報告されることがあります。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p>「自動再生(autoplay)」という用語は通常、読み込まれるとすぐにメディアの再生を開始するページを指すと考えられていますが、ウェブブラウザーの自動再生ポリシーは、<code>play()</code> の呼び出しを含むスクリプト起動によるメディアの再生にも適用されます。</p> + +<p>{{Glossary("user agent","ユーザーエージェント")}}が自動またはスクリプト起動によるメディアの再生を許可しないように設定されている場合、<code>play()</code> を呼び出すと返された promise が直ちに <code>NotAllowedError</code> で拒否されます。 ウェブサイトはこの状況に対処する準備をしておくべきです。 例えば、サイトには再生が自動的に開始されたことを前提としたユーザーインターフェイスを表示するのではなく、返された promise が解決されたか拒否されたかに基づいて UI を更新する必要があります。 詳しくは、以下の{{anch("Example", "例")}}を参照してください。</p> + +<div class="note"> +<p><strong>注</strong>: <code>play()</code> メソッドを使用すると、ユーザーはメディアの再生を許可するように要求され、返された promise が解決されるまでに遅延が生じる可能性があります。 コードが即座の応答を期待していないことを確認してください。</p> +</div> + +<p>自動再生および自動再生のブロックの詳細については、<a href="/ja/docs/Web/Media/Autoplay_guide">メディアおよびウェブオーディオ API の自動再生ガイド</a>を参照してください。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、再生が開始されたことを確認する方法と、ブロックされた自動再生を適切に処理する方法を示します。</p> + +<pre class="brush: js">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 = ""; + } +}</pre> + +<p>この例では、動画の再生は <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/async_function">async</a></code> の <code>playVideo()</code> 関数によってオンとオフを切り替えられます。 動画を再生しようとし、成功した場合は <code>playButton</code> 要素のクラス名を <code>"playing"</code>(再生中)に設定します。 再生が開始されない場合、<code>playButton</code> 要素のクラスはクリアされ、デフォルトの外観に戻ります。 これは、<code>play()</code> によって返された {{jsxref("Promise")}} の解決または拒否を監視することによって、再生ボタンが実際の再生状態と一致することを保証します。</p> + +<p>この例が実行されると、再生のオンとオフを切り替えるために使用する {{HTMLElement("button")}} と同様に {{HTMLElement("video")}} 要素への参照を収集することから始めます。 次に、再生トグルボタンの {{event("click")}} イベントのイベントハンドラを設定し、<code>playVideo()</code> を呼び出して自動的に再生を開始しようとします。</p> + +<p>あなたは <a href="https://media-play-promise.glitch.me/">Glitch でこの例を試したり、リミックスする</a>ことができます。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>仕様</th> + <th>状態</th> + <th>コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-play', 'play()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初期定義; リビング仕様</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','embedded-content-0.html#dom-media-play','play()')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>注</strong>: WHATWG バージョンと W3C バージョンの仕様は、このメソッドが {{jsxref("Promise")}} を返すか、まったく返さないかについて、それぞれ異なります(2018年8月現在)。</p> +</div> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.play")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Media">Web メディア技術</a></li> + <li>学ぶ: <a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a></li> + <li><a href="/ja/docs/Web/Media/Autoplay_guide">メディアおよびウェブオーディオ API の自動再生ガイド</a></li> + <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio APIの利用</a></li> +</ul> 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: 'HTMLMediaElement: play イベント' +slug: Web/API/HTMLMediaElement/play_event +tags: + - Audio + - Event + - HTMLMediaElement + - Reference + - Video +translation_of: Web/API/HTMLMediaElement/play_event +--- +<p>{{APIRef("HTMLMediaElement")}}</p> + +<p class="seoSummary"><code>play</code> メソッドまたは <code>autoplay</code> 属性の結果として、<code>paused</code> プロパティが <code>true</code> から <code>false</code> に変更されたときに <code>play</code> イベントが発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">対象</th> + <td>要素</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">イベントハンドラプロパティ</th> + <td>{{domxref("GlobalEventHandlers.onplay")}}</td> + </tr> + <tr> + <th scope="row">仕様</th> + <td><a href="https://html.spec.whatwg.org/multipage/media.html#event-media-play">HTML5 メディア</a></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらの例では、<code>HTMLMediaElement</code> の <code>play</code> イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。</p> + +<p><code>addEventListener()</code> を使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.addEventListener('play', (event) => { + console.log('Boolean の paused プロパティは false になりました。 ' + + 'play() メソッドが呼び出されたか、autoplay 属性が切り替えられました。'); +});</pre> + +<p><code>onplay</code> イベントハンドラプロパティを使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.onplay = (event) => { + console.log('Boolean の paused プロパティは false になりました。 ' + + 'play() メソッドが呼び出されたか、autoplay 属性が切り替えられました。'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-play", "play media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-play", "play media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.play_event")}}</p> + +<h2 id="Related_Events" name="Related_Events">関連イベント</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing イベント')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough イベント')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate イベント')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play イベント')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend イベント')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied イベント')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled イベント')}}</li> +</ul> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> + +<p> </p> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>HTMLMediaElement.playbackRate</code></strong> プロパティは、メディアが再生されるレートを設定します。これはユーザーが早送りやスローモーションなどのユーザー制御を実装するために使用されます。通常の再生レートにこの値を掛けて現在のレートが求められるため、 1.0 の値が通常の速度です。</p> + +<p><code>playbackRate</code> が負の数であれば、メディアは逆方向に再生されます。</p> + +<p>音声は、逆方向の再生であったり、早送りやスロー再生が実用的な範囲を外れていた場合 (例えば、 Gecko は <code>0.25</code> から <code>5.0</code> の範囲であれば) ミュートされます。</p> + +<p>既定では音声の高さが修正され、どの速度でも同じになります。ブラウザーによっては、これを制御するために標準外の <code>preservespitch</code> プロパティを実装しています。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: js">// 動画 +<var>video</var>.playbackRate = 1.5; +// 音声 +<var>audio</var>.playbackRate = 1.0; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code><a href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">double</a></code> 型。 <code>1.0</code> は「通常の速度」で、 <code>1.0</code> より小さければ通常より遅く、大きければ通常より早く再生されます。 (<strong>既定値:</strong> <code>1.0</code>)</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">var obj = document.createElement('video'); +console.log(obj.playbackRate); // Expected Output: 1</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-media-playbackrate", "HTMLMediaElement.playbackRate")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.playbackRate")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.HTMLMediaElement.playbackRate")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLMediaElement")}} で定義しています。</li> +</ul> 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 +--- +<div>{{APIRef("HTMLMediaElement")}}</div> + +<p><span class="seoSummary"><code>playing</code> イベントは、データ不足のために一時停止または遅延した後に、再開する準備ができたときに発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">対象</th> + <td>Element</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.onplaying")}}</td> + </tr> + <tr> + <th scope="row">仕様書</th> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらの例は、 HTMLMediaElement の <code>playing</code> イベントにイベントリスナーを追加してから、イベントが発生したことでイベントハンドラーが動作したときにメッセージをポストします。</p> + +<p><code>addEventListener()</code> を使用した例:</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.addEventListener('playing', (event) => { + console.log('Video is no longer paused'); +});</pre> + +<p><code>onplaying</code> イベントハンドラープロパティを使用した例:</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.onplaying = (event) => { + console.log('Video is no longer paused.'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-playing", "playing media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-playing", "playing media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.HTMLMediaElement.playing_event")}}</p> + +<h2 id="Related_Events" name="Related_Events">関連イベント</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing イベント')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough イベント')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate イベント')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play イベント')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend イベント')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied イベント')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled イベント')}}</li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> 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 +--- +<div>{{APIRef}}</div> + +<p><strong><code>progress</code></strong> イベントは、ブラウザーがリソースを読み込むときに定期的に発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td><code>onprogress</code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Live_example" name="Live_example">ライブデモ</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: 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></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.event-log-contents { + width: 18rem; + height: 5rem; + border: 1px solid black; + margin: .2rem; + padding: .2rem; +} + +.example { + display: grid; + grid-template-areas: + "button log" + "video log"; +} + +button { + grid-area: button; + width: 10rem; + margin: .5rem 0; +} + +video { + grid-area: video; +} + +.event-log { + grid-area: log; +} + +.event-log>label { + display: block; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: 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); + } +});</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '200px') }}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-progress", "progress media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-progress", "progress media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.HTMLMediaElement.progress_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> 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 +--- +<p>{{APIRef("HTMLMediaElement")}}</p> + +<p class="summary"><span class="seoSummary"><code>ratechange</code> イベントは、再生レートが変更されたときに発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">対象</th> + <td>要素</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">イベントハンドラプロパティ</th> + <td>{{domxref("GlobalEventHandlers.onratechange")}}</td> + </tr> + <tr> + <th scope="row">仕様</th> + <td><a class="external" href="https://html.spec.whatwg.org/multipage/media.html#event-media-ratechange">HTML5 メディア</a></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらの例では、<code>HTMLMediaElement</code> の <code>ratechange</code> イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。</p> + +<p><code>AddEventListener()</code> を使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.addEventListener('ratechange', (event) => { + console.log('再生レートが変わりました。'); +});</pre> + +<p><code>onratechange</code> イベントハンドラプロパティを使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.onratechange = (event) => { + console.log('再生レートが変わりました。'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-ratechange", "ratechange media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-ratechange", "ratechange media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.ratechange_event")}}</p> + +<h2 id="Related_Events" name="Related_Events">関連イベント</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing イベント')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough イベント')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate イベント')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play イベント')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend イベント')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied イベント')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled イベント')}}</li> +</ul> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> 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 +--- +<div>値{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>HTMLMediaElement.readyState</code></strong> プロパティは、メディアの準備状態を示します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var readyState = audioOrVideo.readyState;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code>unsigned short</code> 型。 可能な値は次のとおりです。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">定数</th> + <th scope="col">値</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>HAVE_NOTHING</code></td> + <td>0</td> + <td>メディアリソースに関する情報はありません。</td> + </tr> + <tr> + <td><code>HAVE_METADATA</code></td> + <td>1</td> + <td>メタデータ属性を初期化するのに十分なメディアリソースが取得されました。 シークならば例外を発生させません。</td> + </tr> + <tr> + <td><code>HAVE_CURRENT_DATA</code></td> + <td>2</td> + <td>現在の再生位置にデータがありますが、実際には複数のフレームを再生するのに十分ではありません。</td> + </tr> + <tr> + <td><code>HAVE_FUTURE_DATA</code></td> + <td>3</td> + <td>現在の再生位置と将来までの少なくともほんの少しの時間のデータが利用可能です(つまり、例えば、少なくとも2フレームの動画)。</td> + </tr> + <tr> + <td><code>HAVE_ENOUGH_DATA</code></td> + <td>4</td> + <td>十分なデータが利用可能であり、ダウンロードレートが十分に高いため、メディアを中断することなく最後まで再生できます。</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、要素 `example` に読み込まれる音声データをリッスンします。 その後、少なくとも現在の再生位置が読み込まれているかどうかを確認します。 もしあれば、音声を再生します。</p> + +<pre class="brush: html"><audio id="example" preload="auto"> + <source src="sound.ogg" type="audio/ogg" /> +</audio> +</pre> + +<pre class="brush: js">var obj = document.getElementById('example'); + +obj.addEventListener('loadeddata', function() { + + if(obj.readyState >= 2) { + obj.play(); + } + +}); +</pre> + + + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-media-readystate", "HTMLMediaElement.readyState")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.readyState")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.readyState")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>{{domxref("HTMLMediaElement")}} の <strong><code>seekable</code></strong> 読み取り専用プロパティは、ユーザーがシークできる時間範囲があればそれを含む {{domxref('TimeRanges')}} オブジェクトを返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var seekable = audioOrVideo.seekable;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref('TimeRanges')}} オブジェクト。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html">// 未定</pre> + +<p> </p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "the-video-element.html#dom-media-seekable", "HTMLMediaElement")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>{{SpecName('HTML5 W3C')}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#dom-media-seekable", "HTMLMediaElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初期定義</td> + </tr> + <tr> + <td>{{SpecName('Media Source Extensions','#htmlmediaelement-extensions','HTMLMediaElement extensions, like for seekable')}}</td> + <td>{{Spec2('Media Source Extensions')}}</td> + <td>ソースが {{domxref("MediaSource")}} オブジェクトであるメディア要素のシーク可能な時間範囲を返すための新しいアルゴリズムを指定します。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> + + +<p>{{Compat("api.HTMLMediaElement.seekable")}}</p> +</div> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> + <li><a href="/ja/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions API</a></li> +</ul> 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 +--- +<p>{{APIRef("HTMLMediaElement")}}</p> + +<p><span class="seoSummary"><code>seeked</code> イベントは、シーク操作が完了したことで、現在の再生位置が変更され、<code>Boolean</code> の <code>seeking</code> 属性が <code>false</code> に変更されたときに発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">対象</th> + <td>要素</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">イベントハンドラプロパティ</th> + <td>{{domxref("GlobalEventHandlers.onseeked")}}</td> + </tr> + <tr> + <th scope="row">仕様</th> + <td><a class="external" href="https://html.spec.whatwg.org/multipage/media.html#event-media-seeked">HTML5 メディア</a></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらの例では、<code>HTMLMediaElement</code> の <code>seeked</code> イベントにイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。</p> + +<p><code>AddEventListener()</code> を使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.addEventListener('seeked', (event) => { + console.log('動画が探していた再生位置を見つけました。'); +});</pre> + +<p><code>onseeked</code> イベントハンドラプロパティを使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.onseeked = (event) => { + console.log('動画が探していた再生位置を見つけました。'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-seeked", "seeked media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-seeked", "seeked media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.seeked_event")}}</p> + +<h2 id="Related_Events" name="Related_Events">関連イベント</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing イベント')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough イベント')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate イベント')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play イベント')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend イベント')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied イベント')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled イベント')}}</li> +</ul> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> 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 +--- +<p>{{APIRef("HTMLMediaElement")}}</p> + +<p><span class="seoSummary"><code>seeking</code> イベントは、シーク操作が開始されると発生します。 つまり、<code>Boolean</code> の <code>seeking</code> 属性を <code>true</code> に変更し、メディアは新しい位置をシーク中です。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">対象</th> + <td>要素</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">イベントハンドラプロパティ</th> + <td>{{domxref("GlobalEventHandlers.onseeking")}}</td> + </tr> + <tr> + <th scope="row">仕様</th> + <td><a class="external" href="https://html.spec.whatwg.org/multipage/media.html#event-media-seeking">HTML5 メディア</a></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらの例では、<code>HTMLMediaElement</code> の <code>seeking</code> イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。</p> + +<p><code>AddEventListener()</code> を使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.addEventListener('seeking', (event) => { + console.log('動画は新しい位置をシーク中です。'); +});</pre> + +<p><code>onseeking</code> イベントハンドラプロパティを使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.onseeking = (event) => { + console.log('動画は新しい位置をシーク中です。'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-seeking", "seeking media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-seeking", "seeking media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.seeking_event")}}</p> + +<h2 id="Related_Events" name="Related_Events">関連イベント</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing イベント')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough イベント')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate イベント')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play イベント')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend イベント')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied イベント')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled イベント')}}</li> +</ul> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>HTMLMediaElement.src</code></strong> プロパティは、HTML メディア要素の <code>src</code> 属性の値を反映します。 これは、要素で使用するメディアリソースの URL を示します。</p> + +<div class="note"> +<p><strong>注</strong>: この要素が現在実際に使用しているメディアリソースの URL を知る最善の方法は、{{domxref("HTMLMediaElement.currentSrc", "currentSrc")}} 属性の値を調べることです。 これは、({{HTMLElement("source")}} 要素を表す){{domxref("HTMLSourceElement")}} で提供されるリストからの最良または優先メディアリソースの選択も考慮に入れます。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>mediaUrl</em> = <em>HTMLMediaElement</em>.src;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>要素で使用するメディアリソースの URL を含む {{domxref("USVString")}} オブジェクト。 このプロパティは HTML 要素の <code>src</code> 属性の値を反映します。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">var obj = document.createElement('video'); +console.log(obj.src); // "" +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "embedded-content.html#dom-media-src", "HTMLMediaElement.src")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>{{SpecName('HTML5 W3C')}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#dom-media-src", "HTMLMediaElement.src")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.src")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> +</ul> 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: HTMLMediaElement.srcObject +slug: Web/API/HTMLMediaElement/srcObject +tags: + - API + - DOM + - HTML + - HTML DOM + - HTMLMediaElement + - Media + - Reference + - srcObject +translation_of: Web/API/HTMLMediaElement/srcObject +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary">{{domxref("HTMLMediaElement")}} インターフェイスの <strong><code>srcObject</code></strong> プロパティは {{domxref("HTMLMediaElement")}} に関連付けられたメディアソースを提供するオブジェクトを設定または取得します。</span> このオブジェクトは {{domxref("MediaStream")}}、{{domxref("MediaSource")}}、{{domxref("Blob")}} や(Blobから派生している) {{domxref("File")}} です。</p> + +<div class="note"> +<p><strong>注</strong>: 2017年11月現在、ブラウザーは <code>MediaStream</code> のみをサポートしています。 <code>MediaSource</code>、<code>Blob</code>、および <code>File</code> の場合は、{{domxref("URL.createObjectURL()")}} を使用して URL を作成し、それを {{domxref("HTMLMediaElement.src")}} に割り当てる必要があります。 例として以下を参照してください。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>sourceObject</em> = <em>HTMLMediaElement</em>.srcObject; + +<em>HTMLMediaElement</em>.srcObject = <em>sourceObject</em>; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref('MediaStream')}}、{{domxref('MediaSource')}}、{{domxref('Blob')}}、{{domxref('File')}} オブジェクト。(実際に何がサポートされているのかは互換性テーブルを確認してください。)</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p>メディアソース仕様の古いバージョンでは、オブジェクト URL を作成するために {{domxref("URL.createObjectURL", "createObjectURL()")}} を使用してから、その URL を {{domxref("HTMLMediaElement.src", "src")}} に設定する必要がありました。 現在は、{{domxref("MediaStream")}} を <code>srcObject</code> に直接設定できます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Basic_example" name="Basic_example">基本的な例</h3> + +<p>この例では、メディアソースを新しく作成した {{HTMLElement("video")}} 要素に割り当てています。</p> + +<pre class="brush: js">const mediaSource = new MediaSource(); +const video = document.createElement('video'); +video.srcObject = mediaSource;</pre> + +<h3 id="Supporting_fallback_to_the_src_property" name="Supporting_fallback_to_the_src_property">src プロパティへの代替をサポート</h3> + +<p>上記の例のこのバージョンは、古いバージョンのブラウザーをサポートしています。 それは <code>srcObject</code> をサポートしていない場合に、オブジェクト URL を作成して、それを <code>src</code> に割り当てる必要があります。</p> + +<pre class="brush:js">const mediaSource = new MediaSource(); +const video = document.createElement('video'); +// 古いブラウザーは srcObject を持っていないかもしれません。 +if ('srcObject' in video) { + video.srcObject = mediaSource; +} else { + // これは消えつつあるので、新しいブラウザーで使用しないでください。 + video.src = URL.createObjectURL(mediaSource); +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-srcobject', 'srcObject')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初回定義。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.srcObject")}}</p> 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 +--- +<p>{{APIRef("HTMLMediaElement")}}</p> + +<p><span class="seoSummary"><code>stalled</code> イベントは、ユーザーエージェントがメディアデータをフェッチしようとして、データが予期せずに来なかったときに発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">対象</th> + <td>要素</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">イベントハンドラプロパティ</th> + <td>{{domxref("GlobalEventHandlers.onstalled")}}</td> + </tr> + <tr> + <th scope="row">仕様</th> + <td><a class="external" href="https://html.spec.whatwg.org/multipage/media.html#event-media-stalled">HTML5 メディア</a></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらの例では、<code>HTMLMediaElement</code> の <code>stalled</code> イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。</p> + +<p><code>AddEventListener()</code> を使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.addEventListener('stalled', (event) => { + console.log('データのフェッチに失敗しました。'); +});</pre> + +<p><code>onstalled</code> イベントハンドラプロパティを使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.onstalled = (event) => { + console.log('データのフェッチに失敗しました。'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-stalled", "stalled media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-stalled", "stalled media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.stalled_event")}}</p> + +<h2 id="Related_Events" name="Related_Events">関連イベント</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing イベント')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough イベント')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate イベント')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play イベント')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend イベント')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied イベント')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled イベント')}}</li> +</ul> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> 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 +--- +<p>{{APIRef("HTMLMediaElement")}}</p> + +<p><span class="seoSummary"><code>suspend</code> イベントは、メディアデータの読み込みが中断されたときに発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">対象</th> + <td>要素</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">イベントハンドラプロパティ</th> + <td>{{domxref("GlobalEventHandlers.onsuspend")}}</td> + </tr> + <tr> + <th scope="row">仕様</th> + <td><a class="external" href="https://html.spec.whatwg.org/multipage/media.html#event-media-suspend">HTML5 メディア</a></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらの例では、<code>HTMLMediaElement</code> の <code>suspend</code> イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。</p> + +<p><code>AddEventListener()</code> を使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.addEventListener('suspend', (event) => { + console.log('データの読み込みが中断されました。'); +});</pre> + +<p><code>onsuspend</code> イベントハンドラプロパティを使用する場合</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.onsuspend = (event) => { + console.log('データの読み込みが中断されました。'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-suspend", "suspend media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-suspend", "suspend media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.suspend_event")}}</p> + +<h2 id="Related_Events" name="Related_Events">関連イベント</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing イベント')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough イベント')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate イベント')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play イベント')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend イベント')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied イベント')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled イベント')}}</li> +</ul> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> + +<ul> + <li><a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a></li> +</ul> 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 +--- +<div>{{APIRef("HTMLMediaElement")}}</div> + +<p><span class="seoSummary"><code>timeupdate</code> イベントは、<code>currentTime</code> 属性で示される時刻が更新されたときに発生します。</span></p> + +<p>イベントの頻度はシステムの負荷に依存しますが、およそ 4Hz と 66Hz との間でスローされます (イベントハンドラーが実行するのに 250 ms 以上かかることはないと仮定します)。ユーザーエージェントはシステム負荷とその都度イベントを処理する平均コストに基づいて、イベントの頻度を変えることが推奨されているため、ユーザーエージェントがビデオのデコード中に快適に処理できるよりも頻繁に UI 更新が行われることはありません。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">対象</th> + <td>Element</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.ontimeupdate")}}</td> + </tr> + <tr> + <th scope="row">仕様書</th> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらの例は、 HTMLMediaElement の <code>timeupdate</code> イベントのイベントリスナーを追加し、イベントが発生してイベントハンドラーが動作するときにメッセージを投稿します。なお、イベントの頻度はシステムの稼働状況に依存します。</p> + +<p><code>addEventListener()</code> の使用:</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.addEventListener('timeupdate', (event) => { + console.log('The currentTime attribute has been updated. Again.'); +});</pre> + +<p><code>ontimeupdate</code> イベントハンドラープロパティの使用:</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.ontimeupdate = (event) => { + console.log('The currentTime attribute has been updated. Again.'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-timeupdate", "timeupdate media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-timeupdate", "timeupdate media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.HTMLMediaElement.timeupdate_event")}}</p> + +<h2 id="Related_Events" name="Related_Events">関連イベント</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing イベント')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough イベント')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate イベント')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play イベント')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend イベント')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied イベント')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled イベント')}}</li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}{{draft}}</div> + +<p><span class="seoSummary">{{DOMxRef("HTMLMediaElement")}} オブジェクトの読み取り専用の <strong><code>videoTracks</code></strong> プロパティは、メディア要素の動画トラックを表すすべての {{DOMxRef("VideoTrack")}} オブジェクトを列挙した {{DOMxRef("VideoTrackList")}} オブジェクトを返します。</span></p> + +<p>返されたリストは<em>ライブ</em>です。 つまり、トラックがメディア要素に追加されたり取り除かれたりすると、リストの内容は動的に変化します。 リストへの参照を取得したら、新しい動画トラックが追加されたのか既存のトラックが取り除かれたのかを検出するために変更を監視できます。 メディア要素のトラックリストへの変更を監視する方法の詳細については、{{DOMxRef("VideoTrackList")}} の<a href="/ja/docs/Web/API/VideoTrackList#Event_handlers">イベントハンドラ</a>を参照してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>videoTracks</em> = <em>mediaElement</em>.videoTracks;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>メディア要素に含まれる動画トラックのリストを表す {{DOMxRef("VideoTrackList")}} オブジェクト。 トラックのリストは、配列記法や、オブジェクトの {{domxref("VideoTrackList.getTrackById", "getTrackById()")}} メソッドを使ってアクセスできます。</p> + +<p>各トラックは、トラックに関する情報を提供する {{DOMxRef("VideoTrack")}} オブジェクトによって表されます。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "#dom-media-videotracks", "HTMLMediaElement.videoTracks")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>{{SpecName('HTML5 W3C')}} から変更なし</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + + + +<p>{{Compat("api.HTMLMediaElement.videoTracks")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{DOMxRef("HTMLMediaElement")}}.</li> + <li>{{HTMLElement("video")}}</li> + <li>{{DOMxRef("VideoTrack")}} と {{DOMxRef("VideoTrackList")}}</li> +</ul> 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 +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p><span class="seoSummary"><strong><code>HTMLMediaElement.volume</code></strong> プロパティは、メディアを再生する音量を設定します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>volume</em> = <em>video</em>.volume; //1</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code>double</code> 型で値は 0 から 1 の間でなければなりません。 ここで、0 は効果的にミュートされ、1 が最大の可能な値です。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre>var obj = document.createElement('audio'); +console.log(obj.volume); // 1 +obj.volume = 0.75;</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-media-volume", "HTMLMediaElement.volume")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.volume")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.volume")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>これを定義するインターフェース、{{domxref("HTMLMediaElement")}}。</li> + <li>{{domxref("HTMLMediaElement.muted")}}</li> +</ul> 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 +--- +<div>{{APIRef("HTMLMediaElement")}}</div> + +<p><span class="seoSummary"><code>volumechange</code> イベントは、ボリュームが変更されたときに発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">対象</th> + <td>Element</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.onvolumechange")}}</td> + </tr> + <tr> + <th scope="row">仕様書</th> + <td><a class="external" href="https://html.spec.whatwg.org/multipage/media.html#event-media-volumechange">HTML5 media</a></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらの例では HTMLMediaElement の <code>volumechange</code> イベントのイベントリスナーを追加し、イベントが発生してイベントハンドラーが反応したときにメッセージをポストします。</p> + +<p><code>addEventListener()</code> を使用した例:</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.addEventListener('volumechange', (event) => { + console.log('The volume changed.'); +});</pre> + +<p><code>onvolumechange</code> イベントハンドラープロパティを使用した例:</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.onvolumechange = (event) => { + console.log('The volume changed.'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-volumechange", "volumechange media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-volumechange", "volumechange media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.HTMLMediaElement.volumechange_event")}}</p> + +<h2 id="Related_Events" name="Related_Events">関連イベント</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing イベント')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough イベント')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate イベント')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play イベント')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend イベント')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied イベント')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled イベント')}}</li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> 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 +--- +<div>{{APIRef("HTMLMediaElement")}}</div> + +<p><span class="seoSummary"><code>waiting</code> イベントは、一時的にデータが欠落しているために再生が停止したときに発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">対象</th> + <td>Element</td> + </tr> + <tr> + <th scope="row">既定のアクション</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.onwaiting")}}</td> + </tr> + <tr> + <th scope="row">仕様書</th> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらの例は、 HTMLMediaElement の <code>waiting</code> イベントのイベントリスナーを追加し、イベントの発生によりイベントハンドラーが動作したときにメッセージを登録します。</p> + +<p><code>addEventListener()</code> の使用:</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.addEventListener('waiting', (event) => { + console.log('Video is waiting for more data.'); +});</pre> + +<p><code>onwaiting</code> イベントハンドラープロパティの使用:</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.onwaiting = (event) => { + console.log('Video is waiting for more data.'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-waiting", "waiting media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-waiting", "waiting media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.HTMLMediaElement.waiting_event")}}</p> + +<h2 id="Related_Events" name="Related_Events">関連イベント</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing イベント')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking イベント')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay イベント')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough イベント')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate イベント')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play イベント')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause イベント')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange イベント')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend イベント')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied イベント')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled イベント')}}</li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> |