プロのように HTML に MP4 ビデオファイルを埋め込む方法

プロのように HTML に MP4 ビデオファイルを埋め込む方法

セレナ・トーマス

2021年8月27日 15:00投稿者 MP4

今日では、専門的な仕事を除いて、すべてがますます簡単になっています。 HTMLにMP4ビデオを挿入する これは、すべての Web ブラウザーにビデオなどの埋め込みメディア ファイルを定義するための統一された標準がなかったためです。この章では、Web ページにビデオを追加する 2 つの方法を説明します。これにより、誰でもプロのようにビデオが埋め込まれた HTML を作成できるようになります。

HTMLにMP4を埋め込む

パート 1: HTML に MP4 を挿入する方法

方法 1: コードを使用して HTML に MP4 を埋め込む方法

Web ページは、HTML コードを使用して構造を作成します。これは、写真を埋め込んで HTML に MP4 を追加することに似ています。ただし、再生、ループ、オーディオなどのより多くのコントロールが必要です。さらに、ビデオはブラウザーに応じて拡大縮小する必要があります。したがって、外部 CSS ドキュメントも必要です。

MP4 HTML

ステップ1

まず、CSS ドキュメントを作成し、以下のコマンドを入力します。

.welcome_vid {
表示ブロック;
左マージン: 自動;
右マージン: 自動;
幅: 80%;
高さ: 自動;
}

これは、HTMLの中央にMP4を追加し、ビデオをレスポンシブにすることを意味します。CSSドキュメントの名前を次のようにします。 スタイル.css それを Web ページと同じディレクトリに配置します。

ステップ2

次のコードを Web ページに追加して、CSS ドキュメントを Web ページに挿入します。

<head>
<link rel=”stylesheet” href=”style.css” type=”text/css” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>

ステップ3

次に、以下のコードを使用して MP4 を HTML に挿入します。

交換する パス ビデオフォルダのパスまたはURLと 名前 MP4 ファイル名を使用します。

ステップ4

Web ページを保存し、Web ページでビデオが再生されるかどうかを確認します。

方法 2: HTML に YouTube MP4 を追加する方法

コマンド言語は初心者や一般の人にとっては難しいです。技術的なスキルがなくても HTML に MP4 を追加できるかどうか疑問に思うかもしれません。以下の手順が役立つかもしれません。

ステップ1

ブラウザで YouTube ウェブサイトを開き、アカウントにサインインします。アカウントがない場合は、新しいアカウントを作成してください。

ステップ2

クリック 作成する 右上のビデオカメラアイコンのボタンをクリックし、 ビデオをアップロード. 次にクリックします ファイルを選択 ポップアップ ダイアログのボタンをクリックし、HTML に挿入する MP4 をアップロードします。

ビデオをアップロード

ステップ3

画面の指示に従って説明やその他のオプションを設定します。最後に 保存 ボタン。

ステップ4

次に、YouTubeでアップロードした動画を開くと、いくつかのオプションが表示されます。 共有 アイコンをクリックすると共有パネルが表示されます。 埋め込み タブで、ボックス内のリンクをコピーして、Web ページに貼り付けます。MP4 が HTML ドキュメントに追加されます。デフォルトでは、ビデオは iframe 内に埋め込まれます。ビデオのサイズなどのコードを変更することもできます。

共有パネル

注記: YouTube では、128 GB 未満の 12 時間までのビデオのアップロードのみをサポートしています。推奨されるアスペクト比は 16:9 です。

おすすめ: 最高の MP4 コンバーター

ファイルを追加

MP4は、インターネットを通じてアニメーションコンテンツを配信するための標準的なビデオ形式です。AVI、MKV、その他のロスレスビデオファイルを持っている場合もあります。これらはMP4よりも品質は良いですが、ファイルサイズは大きくなります。最適な解決策は、ビデオファイルをMP4に変換することです。 ブルーレイマスタービデオコンバーターアルティメット.

最高のMP4コンバーターの主な機能

簡単に言えば、ビデオファイルを MP4 に変換するにはこれが最適なオプションです。

パート 2: HTML に MP4 を埋め込むことに関する FAQ

ビデオをリンクに変換するにはどうすればよいですか?

ビデオを URL リンクに変換するには、ホスト サービスが必要です。幸いなことに、利用できるサービスはたくさんあります。たとえば、YouTube ではビデオをアップロードしてリンクに変換できます。さらに、Dropbox などのクラウド サービスにも同様の機能があります。

HTML にビデオを挿入するために使用されるタグはどれですか?

ページの読み込み時にビデオを再生するにはどうすればよいですか?

HTML5 以前は、Web ページでビデオを再生するには、Adobe Flash Player プラグインが必要でした。HTML5 の導入により、ビデオをページ自体に直接配置できるようになりました。

結論

このガイドでは、MP4 を HTML に挿入して、Web ページにビデオを公開する 2 つの簡単な方法を説明しました。初心者の場合は、YouTube をホストとして使用してビデオ リンクを作成できます。ただし、HTML コードを使用すると、ビデオの再生をより細かく制御できます。他の問題がある場合は、この投稿の下にメッセージを残してください。

この投稿についてどう思いますか?

素晴らしい

評価: 4.9 / 5 (180 票)

さらに読む

DAV を MP4 に変換する方法 – CCTV DAV ファイルを変換する 3 つの実用的な方法

DAV ファイルとは何ですか? DAV でビデオを録画した場合、DAV を MP4 に変換するにはどうすればよいでしょうか? この記事で 3 つの実用的な方法について詳しく学んでください。

Windows と Mac で M4A を MP4 に変換する 2 つのベストな方法

iTunes M4A を Android フォンまたは他のデバイスに変換したい場合は、この記事から M4A を MP4 に変換する 2 つの効率的で簡単な方法を入手できます。

WLMP ファイルを MP4 に変換する方法

コンピューターで WLMP ファイルを開けませんでしたか? 実際には、どのメディア プレーヤーでも再生できません。WLMP を MP4 に変換する必要があります。この記事では、WLMP を MP4 に変換する 3 つの方法を紹介します。

WLMP ファイルを MP4 に変換する方法

コンピューターで WLMP ファイルを開けませんでしたか? 実際には、どのメディア プレーヤーでも再生できません。WLMP を MP4 に変換する必要があります。この記事では、WLMP を MP4 に変換する 3 つの方法を紹介します。

MP4

MP4とは MP4から字幕を抽出する MP4 メタデータ エディター MOV と MP4 MP4ファイルを圧縮する MP4 カッター MP4をクロップ