HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLDOMビデオオブジェクト


HTMLのHTMLDOMビデオオブジェクトは、

<ビデオ>を作成する 要素

var videoObject = document.createElement(“VIDEO”)

ここでは、「videoObject」 次のプロパティを持つことができます-

使用可能なオーディオトラックを表すAudioTrackListオブジェクトを返します
自動再生
動画の準備ができたらすぐに再生を開始するかどうかを設定/返します
バッファリング
ビデオのバッファリングされた部分を表すTimeRangesオブジェクトを返します
コントローラー
動画の現在のメディアコントローラーを表すMediaControllerオブジェクトを返します
コントロール
動画のCORS設定を設定/返します
現在の動画のURLを返します
デフォルトで動画をミュートするかどうかを設定/返します
動画のデフォルトの再生速度かどうかを設定/返します
期間
終了
動画の再生が終了したかどうかを返します
エラー
ビデオのエラー状態を表すMediaErrorオブジェクトを返します
高さ
動画の高さ属性の値を設定/返します
ループ
動画が含まれているメディアグループの名前を設定/返します
ミュート
動画の音声をオフにするかどうかを設定/返します
動画の現在のネットワーク状態を返します
一時停止
動画が一時停止されているかどうかを返します
ビデオ再生の速度を設定/返します
再生
ビデオの再生部分を表すTimeRangesオブジェクトを返します
ポスター
動画のポスター属性の値を設定/返します
プリロード
動画のプリロード属性の値を設定/返します
動画の現在の準備完了状態を返します
シーカブル
ビデオのシーク可能な部分を表すTimeRangesオブジェクトを返します
探しています
ユーザーが現在動画で探しているかどうかを返します
動画のsrc属性の値を設定/返します
現在の時間オフセットを表すDateオブジェクトを返します
使用可能なテキストトラックを表すTextTrackListオブジェクトを返します
使用可能なビデオトラックを表すVideoTrackListオブジェクトを返します
ボリューム
ビデオの音量を設定/返します
動画の幅属性の値を設定/返します
プロパティ
説明
audioTracks
動画にコントロールを表示するかどうかを設定/返します(再生/一時停止など)
crossOrigin
currentSrc
currentTime
ビデオの現在の再生位置を設定/戻します(秒単位)
defaultMuted
defaultPlaybackRate
動画の長さ(秒単位)を返します
動画が終了するたびに、動画の再生を再開するかどうかを設定/返します
mediaGroup
networkState
playbackRate
readyState
src
startDate
textTracks
videoTracks
width

プロパティの1つ、つまり HTML DOM Video networkStateの例を見てみましょう。 プロパティ-

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video networkState</title>
<style>
   * {
      padding: 2px;
      margin:5px;
   }
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
   <form>
      <fieldset>
         <legend>HTML-DOM-Video-networkState</legend>
         <video id="demo" width="320" controls><source    src="https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br>
         <input type="button" onclick="setTrackDetails()" value="Set Source">
         <input type="button" onclick="getTrackDetails()" value="Get Network State">
         <div id="divDisplay"></div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var demo = document.getElementById("demo");
   var srcOfMedia = 'https://www.tutorialspoint.com/html5/foo.mp4';
   function getTrackDetails() {
      divDisplay.textContent = 'Network State: '+demo.networkState;
   }
   function setTrackDetails() {
      demo.src = srcOfMedia;
      demo.load();
   }
</script>
</body>
</html>

出力

[ネットワーク状態の取得]をクリックします ソースが定義されていないボタン&inus;

HTMLDOMビデオオブジェクト

[ネットワーク状態の取得]をクリックします ソースが定義されているがブラウザがデータをダウンロードしているボタン-

HTMLDOMビデオオブジェクト

また、「videoObject」 次の方法があります-

ビデオに新しいテキストトラックを追加します
ブラウザが指定されたビデオタイプを再生できるかどうかをチェックします
ビデオ要素を再レンダリングします
動画の再生を開始するために使用されたItis
メソッド
説明
addTextTrack()
canPlayType()
load()
play()
pause()
Itisは再生中の動画を一時停止するために使用されていました

ビデオcanPlayType()の例を見てみましょう プロパティ-

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video canPlayType()</title>
<style>
   * {
      padding: 2px;
      margin:5px;
   }
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
   <form>
      <fieldset>
         <legend>HTML-DOM-Video-canPlayType( )</legend>
         <video id="demo" width="320" controls><source src="" type="video/mp4"></video><br>
         <input type="button" onclick="getTrackDetails()" value="Does Browser Supports video/mp4?">
         <div id="divDisplay"></div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var demo = document.getElementById("demo");
   var srcOfMedia = 'https://www.tutorialspoint.com/html5/foo.mp4';
   function getTrackDetails() {
      var ans = demo.canPlayType('video/mp4');
      if(ans !== ''){
         divDisplay.textContent = 'Browser supports mp4';
         demo.src = srcOfMedia;
         demo.load();
      }
      else
         divDisplay.textContent = 'Browser does not supports mp4';
   }
</script>
</body>
</html>

出力

「ブラウザはビデオ/mp4をサポートしていますか?」をクリックする前に ボタン-

HTMLDOMビデオオブジェクト

「ブラウザはビデオ/mp4をサポートしていますか」をクリックした後 ボタン-

HTMLDOMビデオオブジェクト


  1. HTMLDOMMouseEventオブジェクト

    HTML DOM MouseEventオブジェクトは、マウスとHTMLドキュメント要素との相互作用で発生するイベントを表します。 ここでは、「 MouseEvent 」は次のプロパティとメソッドを持つことができます- プロパティ/メソッド 説明 altKey マウスイベントがトリガーされたときにキーボードの「ALT」キーが押されたかどうかを返します ボタン マウスイベントがトリガーされたときに押されたマウスボタンに対応する数値を返します ボタン マウスイベントがトリガーされたときに押されたマウスボタンを返します clientX

  2. HTMLDOMUlオブジェクト

    HTMLのHTMLDOMUlオブジェクトは、 を表します 要素。 を作成する 要素 var ulObject = document.createElement(“UL”) ここでは、「ulObject」 次のプロパティを持つことができますが、 HTML5ではサポートされていません − プロパティ 説明 コンパクト 順不同リストを通常より小さく表示するかどうかを設定/返します タイプ 順序付けされていないリストのtype属性の値を設定/返します 順不同リストの例を見てみましょう 要素- 例 <!DOCTYPE