HTML5のvideoタグの属性とメソッドを詳しく解説

最近、カスタム プレーヤーを作成しています。作成する前に、プレーヤーのすべてのプロパティとメソッドを確認する必要があります。敵と自分自身を知ることによってのみ、百戦を戦い抜くことができます。私たちが作成したプレーヤーと、私たちが遭遇したいくつかの落とし穴もアップロードします。

• src: ビデオの URL
• ポスター: ビデオ カバー、再生中に画像が表示されない
• プリロード: プリロード
• 自動再生: 自動再生
• ループ：ループ再生
• コントロール: ブラウザに付属のコントロール バー
• 幅: ビデオの幅
• 高さ: ビデオの高さ
• webkit-playsinline=true により、IOS での全画面再生が防止されます
• playsinline=true 上記と同じ
• x-webkit-airplay=trueはiOSのAirPlay機能をサポートします
• x5-video-player-type=h5 同じレイヤーの H5 プレーヤーを有効にする
• x5-video-player-fullscreen=true フルスクリーン設定
• x5-video-orientation=縦長の縦画面
• style=object-fit:塗りつぶしカバーがいっぱいです
• muted=true ミュート再生

他にもいくつかあるはずですが、まだ使用していません。MDN ドキュメントを確認してください。

1. エラーステータス

 $video.error; //null: 通常 $video.error.code //1. ネットワーク エラー 3. デコード エラー 4. 無効な URL

2. ネットワークステータス属性 (一部はより一般的に使用されます)

 $video.currentSrc; //現在のリソースの URL を返します $video.src = value; //現在のリソースの URL を返すか設定します $video.canPlayType(type); //特定の形式のリソースを使用できるかどうか再生 $video.networkState ; //0。この要素は初期化されていません。 1. 通常ですが、ネットワークを使用していません。 3. リソースが見つかりません。 $video.load(); // src で指定されたリソースを再読み込みします。ビデオ.バッファリング; //バッファリングされた領域に戻り、$video.buffered.end(0) はデータの最後の瞬間を取得します $video.preload; //none: メタデータをプリロードしません: リソース情報をプリロードします auto:

3.準備完了状態

 $video.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA $video.seeking; //

4.プレイステータス（常用）

 $video.currentTime = value; //現在の再生位置、割り当ては位置を変更できます $video.duration; //現在のリソース長のストリームは無限を返します $video.paused; //一時停止するかどうか $video.defaultPlaybackRate = value; //デフォルト 再生速度を設定可能 $video.playbackRate = value; //設定直後に現在の再生速度が変更されます $video.seekable //シーク可能領域に戻ります $video.ended; $video.autoPlay; // 自動的に再生するかどうか $video.loop; // ループするかどうか $video.pause();

5.制御

 $video.controls;//デフォルトのコントロールバーの有無 $video.volume = value; //ボリューム $video.muted = value; //ビデオをミュートするイベントメソッド (一般的に追加される *)loadstart //クライアントはリクエストを開始しますdata *progress //クライアントはデータを要求しています stopd //遅延ダウンロード中止 //クライアントはダウンロードを積極的に終了します (エラーが原因ではありません), *error //データ要求中にエラーが発生しました stopd //ネットワーク速度が停止しました * play //play () と自動再生トリガー *再生開始時に一時停止//pause() は、loadedmetadata をトリガーします // リソースの長さの取得に成功しました *waiting // エラーではなく、データを待機しています *playing // 再生を開始します canplay // 再生できますが、途中でロードしているため一時停止する可能性があります *canplaythrough //シーク再生可能 // リソース検索中にシークされました // リソース検索が完了しました *timeupdate // 再生時間が変更されました *end // 再生が終了しました ratechange // 再生レートが変更されましたdurationchange // リソースの長さが変更されました *volumechange // 音量が変更されました

基本的に、カスタム プレーヤー コードはこの API と属性に基づいて記述されるため、後で確認するのに便利です。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。