HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLで音声や動画をページ読み込み時に自動再生する方法【autoplay属性の使い方】

HTMLでページの読み込みが完了した時点で、音声や動画をすぐに再生させたい場合は、autoplay属性を使用します。この属性を<audio>タグや<video>タグに追加すると、ユーザーが再生ボタンをクリックしなくても、メディアの再生が自動的に開始されます。

基本構文

<video>要素や<audio>要素に「autoplay」と記述するだけで、自動再生が有効になります。ブール属性のため、値の指定は不要です。

実装例

以下のコードは、HTMLでautoplay属性を実装したサンプルです。実際に動作を確認してみてください。

<!DOCTYPE HTML>
<html>
   <body>
     <video width = "300" height = "200" controls autoplay>
       <source src = "/html5/foo.ogg" type = "video/ogg" />
       <source src = "/html5/foo.mp4" type = "video/mp4" />
       お使いのブラウザはvideo要素に対応していません。
     </video>
   </body>
</html>

使用時の注意点

近年の主要ブラウザ（Google Chrome、Safari、Firefoxなど）では、突然の音声出力によるユーザー体験の悪化を防ぐため、自動再生に対して制限が設けられています。特に音声付きの動画を確実に自動再生したい場合は、muted属性を組み合わせてミュート状態で再生する必要があります。

<video width="300" height="200" controls autoplay muted>

また、意図しない音声の急な再生はユーザーに不快感を与える可能性があるため、autoplay属性は背景動画やサイレントプロモーション動画など、用途を見極めた上で慎重に使用することをおすすめします。

  1. HTMLで再生の準備ができたときにスクリプトを実行する方法（oncanplay属性の使い方）

    動画や音声などのメディアファイルがブラウザ上で再生を開始できる状態になったタイミングで、JavaScriptを実行したいケースはよくあります。そんなときに活躍するのが、HTML5のoncanplay属性です。oncanplay属性とはoncanplay属性は、メディアのバッファリングがある程度進み、再生を開始できる状態になった時点で指定したスクリプトを実行するイベントハンドラです。この属性は、以下の要素に対して使用できます。<audio>（音声）<embed>（埋め込みコンテンツ）<object>（埋め込みオブジェクト）<video>（動画）使用

  2. 【HTML】ページ読み込み時に選択肢を初期選択する方法｜selected属性の使い方

    selected属性で初期選択を指定するHTMLでページが読み込まれた時点で特定の選択肢を選択済みの状態にしたい場合は、<select>要素内の該当する<option>要素にselected属性を指定します。通常、ドロップダウンリストでは先頭の項目が自動的に選択されて表示されますが、selected属性を使うことで、任意の項目をデフォルト値として設定できます。selected属性は論理属性のため、値を書かずに「selected」と記述するだけで有効になります。以下のコードを実行して、実際の動作を確認してみましょう。コード例<!DOCTYPE html> &l