webサイト制作の勉強|2023年11月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

動画データをhtmlで再生させる

www.ditjapan.com



まずはhtmnl5のvideoタグのプロパティを覚えましょう



  • src=""    (URL)ファイルのURL
  • height=""  数値 要素の高さ
  • width=""    数値 要素の幅
  • autoplay="" autoplay 自動的に再生を行います。
  • controls="" controls 動画再生をコントロールするUIを表示します。
  • loop=""   loop 動画を繰り返し再生します。
  • metadata 動画ファイルを読み込みはじめるタイミングを設定します。preloadが指定されていてもautoplayが入っている場合、autoplayが優先されます。
  • poster="" (URL) ブラウザが指定したファイルを再生できない環境の場合、代替する画像を指定できます。
  • muted   動画に音声がついている場合、音を出さない設定にできます。
  • mediagroup="" 任意の文字列 audioとvideoなどを同期できます。同じ値を入力することで、同じグループとして指定し、再生を同期することができます。

iOS対応

iOSでは「autoplay」だけでは自動再生されないので、合わせて「playsinline」の設定をしましょう。