HTML5動画の基礎知識まとめ

1. video タグの基本属性

1.autoplay="autoplay": 準備が整うとすぐに動画の再生を開始することを指定します

2.control="controls": ブラウザーにデフォルトの一時停止と進行を提供させますビデオプレーヤーコントロールのバーなど。これを設定すると、独自定義のコントロールは使用できなくなります。

3.width="320" height="240": ビデオプレーヤーの幅と高さを定義します。これを設定すると、ページでビデオ プレーヤー用のスペースの一部を予約できるようになります。設定されていない場合、最初は予約されず、ページ レイアウトが混乱する可能性があります

4.loop="loop":ビデオの終了後にビデオが再開されることを規定します

5 .preload 属性: auto はページがロードされた後にビデオ全体をロードすることを意味します。meta はメタデータのみをロードします。none: ビデオをロードしません。

6.src: を指定します。ビデオを再生するための URL、サポートされているビデオ形式: MP4/WebM/Ogg

2. よく使用されるビデオ API

1.currentTime: 現在の再生時間を示します。js 操作を通じて変更できます。再生の進行状況に反映されます

2.load() メソッド: ビデオをロードします。play() メソッド: ビデオを再生します。pause() メソッド: ビデオを一時停止します

3.volume: 現在のサウンドのサイズを示します。 js で調整します

4.muted: true はミュート、false はミュートされていないことを意味します

5.playbackRate: 再生速度を設定します。デフォルトは 1 で 1 秒で再生します

3. js を使用してビデオ インスタンスを制御します

要素セレクターを通じて、対応する

<video id=“video” width=“420”>
    <scource src=“a.mp4” type=“video/mp4”>
    <scource src=“a.ogg” type=“video/ogg”>
</video>