ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5動画の基礎知識まとめ

HTML5動画の基礎知識まとめ

黄舟
黄舟オリジナル
2017-05-19 16:59:571284ブラウズ

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 を使用してビデオ インスタンスを制御します

要素セレクターを通じて、対応する 39000f942b2545a5315c57fa3276f220 要素を取得します: var myVideo = document.getElementById( "video")

myVideo.play(): ビデオの再生を開始します。ビデオの再生

myVideo.height と myVideo.width を通じてビデオのサイズを設定できます

4. ソース e02da388656c3265154666b7c71a8ddc をタグ

39000f942b2545a5315c57fa3276f220 内に配置できます。

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

【関連する推奨事項】

1. IIS の MIME が登録されていない MP4 タイプ、vidoe タグを認識できない問題の解決策

2. H5 video タグで音声のみ再生できて動画が再生できない問題の解決策

3. video タグが mp4 を再生できない問題と解決策を共有します

4. video 要素を使用して動画を作成します。 html5のプレーヤー

5.

html5のvideoタグテストアプリの詳細説明

以上がHTML5動画の基礎知識まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。