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

JavaScriptチャートライブラリPlotly.jsでチャートを描画する

公式サイト Plotly JavaScript Graphing Library | JavaScript | Plotlyhttps://plotly.com/javascript/ サンプルコード …

no image

フレキシブルなJavaScriptチャートライブラリTauchartsの使い方

サンプルコード 公式ドキュメントのTutorialsの内、簡易的なものを実際に動かしてみます。https://api.taucharts.com/tutorials/1min.html <htm …

no image

画像のExif情報を読み込むJavaScriptライブラリExif.jsの使い方

Exif.jshttps://github.com/exif-js/exif-js 使い方 ここではローカルサーバーに配置したHTMLファイルから使用します。fileプロトコルでアクセスしている場合は …

no image

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

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

no image

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

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