HTMLページに動画を埋め込み、ページアクセス時に動画が自動再生されるようにする

2024年6月18日

HTMLページに動画を埋め込み、ページアクセス時に動画が自動再生されるようにするには、以下のようなコードを使用できます。ただし、注意点として、自動再生は一部のブラウザでブロックされる場合があります。ユーザビリティやブラウザの方針に留意しながら使用してください。

html
{% extends "tools/base.html" %}

{% block title %}CSV結合フォーム{% endblock %}

{% block content %}

    <h2>CSV結合フォーム</h2>
    <p class="text-muted mb-3">同じフォーマットのCSVデータを連結します。（例：RMSからCSVダウンロードしたデータを連結する等）<br>
        データはバックアップされるので紛失した場合は復元可能ですのでお知らせください。<br>
        チャットワーク：石川</p>

    <!-- 動画埋め込み -->
    <video width="640" height="360" controls autoplay muted>
        <!-- 動画ファイルのパスを指定 -->
        <source src="path/to/your/video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <form action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="mb-3">
            <label for="files" class="form-label">ファイルを選択してください</label>
            <input type="file" class="form-control" id="files" name="files" multiple>
        </div>
        <button type="submit" class="btn btn-primary">アップロード</button>
    </form>

{% endblock %}

この例では、<video>要素を使用して動画を埋め込んでいます。controls属性は動画プレーヤーのコントロールボタンを表示し、autoplay属性は動画の自動再生を有効にします。muted属性は動画の音声をミュートにしています。動画のパスやフォーマットは実際のものに置き換えてください。

未分類

Posted by ぼっち