BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

html5動画の共通APIインタフェースの実例を紹介

2022-01-14 23:23:42

I. 属性にはboolean型のものもありますが、エラーを避けるためにXHTML（属性名="属性値"）形式で記述することをお勧めします（以下の太字の属性は一般的な属性です）。

<テーブル 属性 値 機能説明 コントロール コントロールズ 再生コントロールの表示の有無 オートプレイ オートプレイ ブラウザを開いた後に自動再生するかどうかを設定する 幅 パイレックス(ピクセル) プレーヤーの幅を設定します 高さ パイレックス(ピクセル) プレーヤーの高さを設定します ループ ループ 動画をループ再生するかどうかを設定する（再生終了後に再生を継続する）。 プリロード プリロード 再生前にローディングを待つかどうかを設定する src url 再生するビデオのURLアドレスを設定する ポスター imgurl デフォルトで画像を表示するようにプレーヤーを設定する オートバッファ オートバッファー ブラウザのキャッシュ方式に設定し、オートプライは有効に設定しない

デモの様子 

<video controls="controls" width="500px" height="500px" loop autoplay poster="imgUrl">
    <source src="hacked.mp4" type="video/mp4"/>
    <track src="a.vtt" label="Chinese" srclang="zh" kind="subtitles" default/>
</video>

2つ目は、.videoタグのAPIメソッドです。ビデオタグはまた、直接呼び出し、便利でシンプルなJSを書くための、より人道的なAPIインターフェイスのメソッドを提供します。

<テーブル API イベントの説明 addTextTrack() オーディオ/ビデオに新しいテキストトラックを追加します。 プレイ video.play(); 動画を再生する 一時停止 video.pause(); 動画を一時停止します。 ロード video.load(); すべてのプロパティをデフォルトに戻し、動画を再起動させた状態にします。 canPlayType var support = videoid.canPlayType('video/mp4'); ブラウザが現在のビデオ形式のタイプをサポートしているかどうかを判断します 返り値：空文字列：サポートされていない Maybe：おそらくサポートされている Probably：完全にサポートされている

videoタグのAPIインターフェースは、JSでは以下のように使用します。 

<!DOCTYPE HTML>
<html>
<head>
    <style>
        video::cue{
            background-color:transparent;
            color:white;
            font-size:20px;
            line-height: 100px;
        }
    </style>
</head>
<body>

<video controls="controls" id="video1">
    <source src="Hackerville.S01E01.720P.mp4" type="video/mp4"/>
    <track src="a.vtt" label="Chinese subtitles" srclang="zh" kind="subtitles" default/>
</video>
<button onclick="isPlay(this)">play</button>
<button onclick="replay()">Replay</button>
<button onclick="isPlayType()">Browser support</button>

<script>
    var video1 = document.getElementById("video1"); //the id of the video tag is in parentheses
    //play the video (click the play button, then it becomes paused)
　　 function isPlay(obj1){
       if(video1.pused){ //paused belongs to the video api property
     　　　　  obj1.innerHTML="pause";
     　　　　  video1.play();
　　　　}else{
      　　　　 obj1.innerHTML="play";
      　　　　 video1.pause();
　　　　}
}

//replay from the beginning
function replay(){
       video1.load();
}

// determine if the video format to be played is supported by the current browser
function isPlayType(){
       var support = video1.canPlayType("video/mp4");
       console.log(support); // return result: empty string, maybe (may support), probably (support)
}
</script>
</body>
</html>

三つ目は、videoタグのAPI属性です。VideoはAPIインタフェースを提供するだけでなく、JSでの判定を容易にするために、以下のように多くのAPI属性を提供します：ほとんどの属性はブール値で判定されます。

<テーブル API プロパティ イベントの説明 継続時間 メディア再生の総時間を秒単位で返します ループ ループさせるか、させないか ミュート ミュートにするかしないか 一時停止 一時停止をするかどうか 現在時刻 現在の再生時間(秒) ボリューム ボリューム値(0~1) ネットワーク状態 現在のネットワークの状態を返します 再生速度 再生倍率（スピードアップ、スローダウン再生）（-2〜2） src 現在の動画ソースの URL 終了 現在の再生が終了したか否かのフラグを返します。 エラー 現在のプレイバックのエラーステータスを返します。 初期時間 再生位置の初期値を返します メディアグループ 現在の音声/動画が属するメディアグループ（複数の音声/動画タグをリンクするために使用される） 再生 現在再生中のパートが再生された時間範囲（TimeRangesオブジェクト）。 プリロード ページの読み込みと同時にオーディオとビデオを読み込むかどうか ReadyState 現在のレディ状態を返します シーク可能 現在のジャンプ可能な部分の時間範囲を返す（TimeRanges オブジェクト）。 オーディオトラックズ 利用可能なオーディオトラックのリスト（MultipleTrackList オブジェクト）を返します。 オートプレイ メディアが読み込まれたときに自動再生する バッファリング バッファリングされた部分の時間範囲を返す（TimeRanges オブジェクト）。 コントローラ 現在のメディアコントローラー（MediaController オブジェクト）を返します。 コントロール ブロードキャストコントロールの表示 クロスオリジン CORSの設定 カレントSrc 現在のメディアの URL を返します デフォルトミュート デフォルトのミュートの有無 defaultPlaybackRate ブロードキャスト制御のデフォルトの倍率 シーク ユーザーがジャンプをしたかどうかを返します 開始オフセット時間 現在時刻のオフセット（Dateオブジェクト）を返します。 テキストトラック 利用可能なテキストトラック（TextTrackList オブジェクト）を返します。 ビデオトラック 利用可能なビデオトラックを返します（VideoTrackList オブジェクト）。

デモ 

<script>
function setting(){
     video1.muted=true; //Set mute
     video1.volume=0.2; //Set volume,1 equals 100%
     video1.playbackRate=2; //2 times the playback speed
     video1.controls=false; //do not show playback controls
}
</script>

IV. オーディオ/ビデオイベント

<テーブル イベント情報 説明 アボート オーディオ/ビデオのロードが中断されたときに発生する。 キャンプレイ ブラウザがオーディオ/ビデオの再生を開始できるようになったときにトリガされます。 キャンプレースルー ブラウザがバッファリングによるストールなしにプレイスルーできるときにトリガされます。 期間変更 オーディオ/ビデオのデュレーションが変更されたときにトリガされます。 エンプティ 現在のプレイリストが空のときにトリガされます。 終了 現在のプレイリストが終了したときにトリガーされます。 エラー オーディオ/ビデオのロード中にエラーが発生した場合にトリガされます。 ロードデータ ブラウザがオーディオ/ビデオの現在のフレームをロードしたときにトリガされます。 ロードメタデータ ブラウザがオーディオ/ビデオのメタデータをロードしたときにトリガされます。 ロードスタート ブラウザがオーディオ/ビデオの検索を開始したときにトリガされます。 ポーズ 音声・映像が一時停止されたときに発生する。 プレイ オーディオ/ビデオが開始されたとき、または一時停止が解除されたときにトリガされます。 演奏 バッファリングのために一時停止または停止した後、オーディオ/ビデオの準備ができたときにトリガされます。 進捗状況 ブラウザがオーディオ/ビデオをダウンロードしているときにトリガーされます。 レート変更 オーディオ/ビデオの再生速度が変更されたときに発生する。 シーク ユーザーがオーディオ/ビデオ内の新しい位置に移動/ジャンプしたときにトリガされます。 シーク ユーザーがオーディオ/ビデオ内の新しい位置に移動/ジャンプを開始したときにトリガされます。 失速 ブラウザがメディアデータの取得を試みたが、データが利用できない場合に発生する。 サスペンド ブラウザが意図的にメディアデータを取得しない場合に発生する。 時間更新 現在の再生位置が変化したときにトリガーされる。 ボリュームチェンジ ボリュームが変更されたときに発生する。 待機中 次のフレームをバッファリングする必要があるため、動画が停止したときにトリガされます。

 html5 videoの共通APIインターフェースについての記事は以上です。html5 videoのAPIインターフェースについては、スクリプトハウスの過去記事を検索していただくか、引き続き以下の記事をご覧ください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します