3テラバイト

プログラム関連備忘録サイト。主にゲーム。

HTML

動画を埋め込むHTML要素<video>の使い方

投稿日:

動画を埋め込む

以下のようにsrc属性に埋め込みたい動画のURLを指定することで動画を埋め込むことができます。

<video src="movie.mp4"></video>

または<source>要素を用いて以下のように記述することもできます。

<video>
  <source src="movie.mp4" type="video/mp4">
</video>

またvideoタグ内にテキストを記述しておくと、ブラウザで要素がサポートされていなかった場合にテキストを表示することができます。

<video>
  <source src="movie.mp4" type="video/mp4">
  このブラウザでは動画埋め込みがサポートされていません。
</video>

コントロールを表示する

以下のようにcontrols属性を指定すると、再生や音量のコントロールを行うことができるようになります。

<video controls>
  <source src="movie.mp4" type="video/mp4">
</video>

幅や高さを指定する

width属性で幅を、height属性で高さを指定することができます。

いずれもピクセル数で指定します。

<video width="1280" height="768">
    <source src="movie.mp4" type="video/mp4">
</video>

自動で再生する

以下のようにautoplay属性を指定すると、再生可能になった時点で自動的に再生を開始します。

ブラウザにより、muted属性も指定しないと動作しません。

<video autoplay muted>
    <source src="movie.mp4" type="video/mp4">
</video>

リンク

&lt;video&gt;: 動画埋め込み要素 – HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/video

&lt;source&gt;: メディアまたは画像のソース要素 – HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/source

-HTML


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

D3.jsベースのJavaScriptチャートライブラリC3.jsの使い方

公式サイト https://c3js.org/ サンプルコード Getting Startedページのサンプルを動かしてみます。https://c3js.org/gettingstarted.html …

no image

inputタグで選択した画像をimgタグに表示する

コード input要素で画像を選択した際に、選択した画像をimg要素に表示するサンプルコードです。 URL.createObjectURL()を使用する FileReader.readAsDataUR …

no image

ブラウザとモバイルデバイス用のインタラクティブチャートを実装するJavaScriptチャートライブラリGoogle Chartsの使い方

公式サイト https://developers.google.com/chart サンプルコード <html> <head> <script type="te …

no image

HTMLからWindowsの設定ページを開く

ms-settings: URIスキームを用いて、HTMLのリンク先に特殊なURIを指定することで、ブラウザからWindowsの設定アプリの該当ページを開くことができます。 以下のようなHTMLコード …

no image

HTML – svgタグで図形を描画する

サンプルコード <!DOCTYPE html> <html> <head> </head> <body> <svg width=&qu …