HTML ページにミュージック ビデオを追加する例

1. ビデオタグ

Firefoxでは自動再生をサポートしますが、GoogleとIEではサポートしません

<video controls="controls" autoplay="autoplay" name="media"><source src="./img/music.mp3" type="audio/mpeg"></video>

Googleはミュートを追加することで自動再生を有効にすることができます

<video controls="controls" autoplay="autoplay" name="media" muted><source src="./img/music.mp3" type="audio/mpeg"></video> 

原則として、ほとんどのブラウザはサイレントビデオ再生をサポートしています。

<video controls="controls" autoplay="autoplay" name="media" muted><source src="http://vjs.zencdn.net/v/oceans.mp4" type="audio/mpeg"></video>

2. オーディオタグ

注: タグは、音楽やその他のオーディオ ストリームなどのサウンドを定義します。

<audio controls="controls" ><source src="./img/music.mp3"></audio> 

注: 音楽のみをロードでき、ビデオはロードできません

3.埋め込み

複数のプレイヤーをサポート

自動再生は Android をサポートしていますが、iOS はサポートしていません。Google IE と Edge はサポートしていますが、Firefox はサポートしていません。

<embed src="./img/music.mp3" hidden="true" autostart="true" loop="true"> 
<埋め込み src="http://vjs.zencdn.net/v/oceans.mp4" 自動開始="true" ループ="true"> 

追加メモ:

iOS や Android では、オーディオの自動再生ができないのは昔からよくあることです。デスクトップ版 Safari も 2017 年のバージョン 11 で、サウンド付きのマルチメディアの自動再生を無効にすると発表しました。その後、2018 年 4 月にリリースされた Chrome 66 でもサウンドの自動再生が正式にオフになり、<audio autopaly> <video autoplay> もデスクトップ版ブラウザでは無効になります。

Google は次のように説明しています。
自動再生の例外条件: 前述のように、ビデオ自体がミュートに設定されている場合、ブラウザは自動再生のためにビデオの読み込みをブロックしなくなります。同時に、ユーザーが以前に自動再生をクリックした場合、次回同じ Web サイトにアクセスしたときに、ブラウザはデフォルトで再生をブロックしません。モバイル デバイスでは、ユーザーが Web サイトをホーム画面に追加することを選択した場合、つまり頻繁にアクセスする Web サイトを選択した場合、この場合も自動的に再生されます。
最後に：Googleの統計によると、動画サイトなどウェブサイトの動画が大量に再生される場合、自動再生機能はブロックされない。

HTML ウェブページにミュージックビデオを追加する実装例に関するこの記事はこれで終わりです。HTML にミュージックビデオを追加することに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。