-
HTML DOM Video autoplayプロパティとは?使い方とコード例を徹底解説
HTML DOMのVideo autoplayプロパティは、ページの読み込み時に動画を自動再生するかどうかを表すブール値(true/false)を、取得および設定できるプロパティです。 このプロパティを使うことで、JavaScriptから動的に動画の自動再生の挙動を制御することができます。 構文 構文は以下の通りです。 ブール値を取得する場合 mediaObject.autoplay autoplayに値を設定する場合 mediaObject.autoplay = booleanValue ここで「booleanValue」には、以下のいずれかの値を指定します。 booleanValue
-
HTML DOM Videoのbufferedプロパティとは?使い方をサンプルコード付きで解説
HTML DOM Video bufferedプロパティとは HTML DOMのVideo要素におけるbufferedプロパティは、動画のバッファ済み(読み込み済み)範囲に関する情報を含むTimeRangesオブジェクトを返します。このオブジェクトには、バッファされた範囲の長さや、その開始位置・終了位置が格納されています。 このプロパティを活用することで、JavaScriptから動画がどこまで読み込み完了しているかを取得でき、独自のプログレスバーやバッファ状況の表示などを実装する際に非常に役立ちます。 構文 bufferedプロパティの構文は以下のとおりです。 TimeRangesオブジェクト
-
HTML DOM Video canPlayType()メソッドとは?使い方と戻り値をわかりやすく解説
HTML DOM の Video canPlayType() メソッドは、ブラウザが指定された動画形式(MIMEタイプ)を再生できるかどうかに応じた文字列を返すメソッドです。動画再生機能を実装する際に、事前に対応状況を判定するために活用されます。構文以下が構文です。videoObject.canPlayType(typeAsParameter)引数には判定したい動画の MIME タイプ(例:video/mp4)を指定します。メソッドの戻り値は以下のいずれかになります。戻り値詳細probablyブラウザが指定された動画形式をほぼ確実にサポートしていることを示します。maybeブラウザが指定された
-
HTML DOM Video controlsプロパティの使い方を徹底解説
HTML DOMのVideo controlsプロパティは、動画に標準のコントロール(再生・一時停止・音量調整など)を表示するかどうかを、ブール値(true/false)で取得または設定するためのプロパティです。構文以下が基本の構文です。値を取得する場合(true/falseが返される)mediaObject.controls値を設定する場合mediaObject.controls = booleanValueここで指定できる「booleanValue」は以下の通りです。booleanValue説明true動画に標準のコントロールが表示されますfalse動画に標準のコントロールは表示されません
-
HTML DOM Video currentSrcプロパティとは?動画URLの取得方法をわかりやすく解説
HTML DOM Video currentSrcプロパティとはHTML DOMのVideo currentSrcプロパティは、<video>要素で現在選択されている動画リソースのURLを表す文字列を返します。複数の<source>タグを指定している場合でも、ブラウザが実際に読み込んだファイルのURLを取得できるため、動作確認やアクセス制御の実装などに役立ちます。構文currentSrcプロパティの値を取得する基本的な構文は以下の通りです。mediaObject.currentSrcこのプロパティは読み取り専用であり、値を設定することはできません。また、動画がまだ読み込
-
HTML DOM Video currentTimeプロパティの使い方とサンプルコード解説
HTML DOMのVideo currentTimeプロパティは、メディア(動画)内の現在の再生位置を秒単位で取得・設定するために使用されます。このプロパティを使うことで、JavaScriptから動画の任意の場所にシーク(移動)したり、現在再生中の位置を取得したりすることが可能です。 構文 currentTimeプロパティの基本的な構文は以下のとおりです。 再生位置を取得する場合 mediaObject.currentTime この書き方では、メディアオブジェクトの現在のシーク位置(再生位置)が秒数として返されます。 指定した位置に移動する場合 mediaObject.currentTime
-
HTML DOM Video defaultMutedプロパティの使い方を徹底解説
defaultMutedプロパティとはHTML DOM VideoのdefaultMutedプロパティは、動画の音声がデフォルトでミュート状態になるかどうかを表す真偽値(boolean)を取得・設定するためのプロパティです。注意: このプロパティはHTMLドキュメントに対して動的な効果を持つものではなく、HTML DOM Videoのmutedプロパティの初期状態を反映しているだけです。構文以下が構文の基本形式です。真偽値を取得する場合(true / false)mediaObject.defaultMuteddefaultMutedに真偽値を設定する場合mediaObject.default
-
HTML DOM Video defaultPlaybackRateプロパティの使い方を徹底解説
HTML DOMのVideo defaultPlaybackRateプロパティは、メディアのデフォルト再生速度に対応する数値を取得・設定するためのプロパティです。このプロパティを使うことで、動画が読み込まれた際の標準的な再生スピードをJavaScriptから制御できます。 構文 以下が基本の構文です。 defaultPlaybackRateを数値として取得する場合 mediaObject.defaultPlaybackRate defaultPlaybackRateに数値を設定する場合 mediaObject.defaultPlaybackRate = number 注意: 設定できる数値の最
-
HTML DOM Track srcプロパティとは?構文とサンプルコードでわかりやすく解説
Track srcプロパティとは HTML DOMのTrack srcプロパティは、<track>要素のsrc属性の値を取得または設定するためのプロパティです。src属性には、動画や音声に重ねて表示する字幕・キャプションなどのトラックファイルのURLを指定します。 構文 src属性の値を取得する場合 trackObject.src トラックファイルのURLを表す文字列値が返されます。 src属性に値を設定する場合 trackObject.src = URL 指定したURLがtrack要素のsrc属性に設定されます。 Track srcプロパティの使用例 次の例では、video要素内
-
HTML DOM Trackのsrclangプロパティの使い方を徹底解説
HTML DOMのTrackオブジェクトが持つsrclangプロパティは、テキストトラック(字幕やキャプションなど)の言語を取得、または設定するためのプロパティです。この記事では、srclangプロパティの基本的な構文から、実際に動作するサンプルコードまでをわかりやすく解説します。srclangプロパティの構文srclangプロパティの使い方は、値の取得と設定の2パターンがあります。値を取得する場合(文字列型で返却)trackObject.srclang値を設定する場合trackObject.srclang = stringValue設定できる値は、ISO 639-1などで定義された言語コード
-
HTML DOM TransitionEventのelapsedTimeプロパティの使い方を解説
TransitionEvent elapsedTimeプロパティとはHTML DOMのTransitionEvent elapsedTimeプロパティは、トランジションイベントが発生した時点で、そのトランジションが何秒間実行されていたかを表す数値を返します。このプロパティは読み取り専用であり、transitionendイベントなどトランジション関連のイベントハンドラ内で利用することで、CSSトランジションの進行状況や完了までの所要時間を簡単に把握できます。構文トランジションが実行されていた秒数を取得するには、以下のように記述します。transitionEvent.elapsedTimeTran
-
HTML DOM TransitionEventのpropertyNameプロパティとは?使い方とサンプルコード
TransitionEvent propertyNameプロパティとはHTML DOM の TransitionEvent オブジェクトの propertyName プロパティは、transitionstart や transitionend などのトランジションイベントが発生した際に、そのトランジションで実際に使用された CSS プロパティ名を文字列として返します。例えば、要素の transform プロパティに対してトランジションアニメーションが実行された場合、このプロパティは「transform」という値を返します。どの CSS プロパティがアニメーション対象だったのかを動的に判別したい
-
HTML DOM TransitionEventオブジェクトとは?主なプロパティと使い方を解説
TransitionEventオブジェクトとは HTML DOMのTransitionEventオブジェクトは、CSSトランジション(transition)が発生した際に生成されるイベントを表すオブジェクトです。要素のスタイル変化アニメーションの開始や完了などのタイミングをJavaScriptで検知したい場合に活用できます。 TransitionEventオブジェクトには、主に以下のプロパティが用意されています。 プロパティ説明 propertyNameトランジションイベントが発生したときに、そのトランジションで使用されたCSSプロパティ名に対応する文字列を返します。 elapsedT
-
HTML DOM Event typeプロパティとは?イベントの種類を取得する方法を実例付きで解説
HTML DOM Event typeプロパティとはHTML DOMのEvent typeプロパティは、発生したイベントの種類に対応する文字列を返すプロパティです。「click」「keypress」「load」「touchend」など、さまざまなイベントタイプを取得できます。構文イベントの種類を文字列として取得するには、以下のように記述します。event.typeそれでは、Event typeプロパティの具体的な使用例を見ていきましょう。使用例以下のサンプルでは、赤い円形の要素に対して「クリック」または「タッチ」が行われた際に、event.typeでイベントの種類を判定しています。イベントの種
-
HTML DOM UiEvent detailプロパティとは?連続クリック数の取得方法を実例付きで解説
HTML DOM の UiEvent detail プロパティは、ユーザーが短時間に連続して行ったクリックの回数に対応する数値を返します。ダブルクリックやトリプルクリックなど、続けてクリックされた回数を取得したい場面で活躍するプロパティです。注意: ondblclick イベントが発生した場合、戻り値は「2」になります。一方、onmouseover や onmouseout イベントが発生した場合、戻り値は常に「0」です。構文detail プロパティの構文は以下のとおりです。連続クリック数を取得する場合:event.detailUiEvent detail プロパティの使用例次の例では、黄色い
-
HTML DOM UiEventオブジェクトとは?detailプロパティの使い方を解説
HTML DOM UiEventオブジェクトとは HTML DOMのUiEventオブジェクトは、ユーザーがHTML要素を操作した際に発生するイベントを表します。クリックやキー入力といったユーザー操作に起因するイベントの基底インターフェースとして機能し、MouseEventやKeyboardEventなどもUiEventを継承しています。 UiEventオブジェクトには、以下のプロパティとメソッドが用意されています。 プロパティ/メソッド 説明 detail イベントに関する詳細情報を含む数値を返します。clickイベントの場合は、連続クリックの回数を表します。 view イ
-
HTML DOM Ulオブジェクトとは?<ul>要素の操作方法とサンプルコードを解説
HTML DOM の Ul オブジェクトは、HTML の <ul>(順序なしリスト)要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注
-
HTML DOM アンダーラインオブジェクトとは?<u>要素をJavaScriptで操作する方法
HTML DOM のアンダーライン(Underline)オブジェクトは、HTML の <u> 要素を JavaScript から操作するためのインターフェースです。<u> 要素はテキストに下線を引くためのインライン要素で、単なる装飾だけでなく、誤字の指摘や固有名詞の注釈など、意味的な強調を表す場面でも活用されます。 <u> 要素の作成方法 新しい <u> 要素を動的に生成したい場合は、document.createElement() メソッドを使用します。 var uObject = document.createElement(U); サン
-
HTML DOM TouchEventのmetaKeyプロパティとは?使い方とサンプルコードを解説
HTML DOM の TouchEvent metaKey プロパティは、タッチイベントが発生した時点で Meta キーが押されていたかどうかの状態を示すブール値(true / false)を返します。Mac の Command キーや Windows キーなどが Meta キーに該当します。 構文 metaKey プロパティは、以下のように記述することでブール値を取得できます。 touchEvent.metaKey 戻り値(booleanValue) booleanValue詳細 trueタッチイベントが発生したときに Meta キーが押されていたことを示します。 falseタッチイ
-
HTML DOM TouchEventのshiftKeyプロパティとは?使い方とサンプルコードを解説
HTML DOM TouchEvent の shiftKey プロパティは、タッチイベントが発生した時点で Shift キーが押されていたかどうかに対応するブール値(Boolean)を返すプロパティです。 構文 ブール値(true / false)を返します。 touchEvent.shiftKey ここで返される booleanValue は以下のいずれかになります。 booleanValue詳細 trueタッチイベントが発生したときに Shift キーが押されていたことを示します falseタッチイベントが発生したときに Shift キーは押されていなかったことを示します 注意