ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 を使用して自動再生ビデオをページに挿入する方法

HTML5 を使用して自動再生ビデオをページに挿入する方法

yulia
リリース: 2018-10-30 14:53:09
オリジナル
40122 人が閲覧しました

Web サイトを閲覧するときに、Web サイトにビデオや音声などが含まれていることに気づいたことはありますか? HTML と CSS を学習している友人の皆さん、HTML5 を使用してページにビデオを挿入し、それらを自動的に再生する方法を知っていますか? ?この記事では、HTML5 にビデオを挿入する方法と、HTML にビデオを挿入するためのコードについて説明します。興味のある方は参考にしてください。

HTML5 の

ビデオの挿入に関連するタグの紹介:

動画の

はメディア プレーヤーのテキスト トラックに設定できます

注: 使用する場合はブラウザの互換性に注意する必要があります。

HTML5 を使用して自動再生ビデオをページに挿入する方法

デモの例 1: 方法html5 を使用してページにビデオを挿入します

例の詳細な説明:
まず、

<video width="300" height="200" controls>
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
ログイン後にコピー

効果画像:

HTML5 を使用して自動再生ビデオをページに挿入する方法

インスタンスのデモ 2: ページ内で自動的に再生できるビデオを挿入します。

構文:

ページに自動再生できるビデオを挿入するには、 HTML の

<video width="320"  style="max-width:90%" controls autoplay>
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>
ログイン後にコピー

HTML に

以上、HTML5でページに動画を挿入する方法と、自動再生できる動画を挿入する方法を詳しく、比較的分かりやすく紹介しました。初心者は自分で試して、ビデオを見つけてページに挿入できます。この記事があなたのコードで自動再生の効果を実現できるかどうかを確認してください。

【関連チュートリアルの推奨事項】

1. HTML5 ビデオ チュートリアル
2. HTML 開発マニュアル
3.ブートストラップ チュートリアル #4.
CSS ページ読み込みアニメーション効果 ##

以上がHTML5 を使用して自動再生ビデオをページに挿入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート