sourceの使い方についてまとめ

sourceの概要

sourceはvideoやaudioやpictureの子要素として使用し、複数のメディアソースを指定します。

sourceのカテゴリー

コンテンツカテゴリー

  • コンテンツカテゴリなし

    コンテンツモデル

    • コンテンツモデルなし

sourceに入れられるタグ一覧

タグ早見表

なし（空要素）

入れられるタグのカテゴリー・モデル

  • コンテンツカテゴリなし
  • コンテンツモデルなし

videoに使える属性

属性とは<video> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id 概要 要素に対してID固有の識別名を付けることができます。
属性の値 英字から始まる英数字
class 概要 要素に対して分類名を付けることができます。
属性の値 英字から始まる英数字
style 概要 要素に対して直接スタイルを指定することができます。
属性の値 スタイルシートのコード
グローバル属性一覧はこちら
src 概要 埋め込む動画へのURLを指定します。省略可能です。埋め込む映像の指定にはvideo要素のブロック内でsourceを使用することもできます
属性の値 URL
type 概要 メディアタイプ（MIMEタイプ）を指定します。必要に応じてcodecs引数も共に指定します。指定がない場合、サーバーからメディア形式を取得し、ユーザーエージェントが扱うことができるものであるかどうかを確認します。表示ができない場合は、次のsourceをチェックします。
属性の値 「video/mp4」、「video/webm」など

スポンサードサーチ

sourceの使い方



ブラウザ対応状況

ブラウザの対応（PC)
Chrome あり
Safari あり
Internet Explorer あり
Edge あり
Firefox あり
Opera あり
ブラウザの対応（SP)
Chrome あり
Safari あり
Samsung Internet あり