1. ホーム
  2. Web制作
  3. HTML/Xhtml

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

2022-01-07 20:16:25

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.埋め込み

複数のプレーヤーに対応可能

自動再生は、iosではなくandroid、firefoxではなくgoogleieie edgeをサポートしています。

<embed src=". /img/music.mp3" hidden="true" autostart="true" loop="true"> 
<embed src="http://vjs.zencdn.net/v/oceans.mp4" autostart="true" loop="true"> 


その他の注意事項

サウンドオートプレイはIOS/Androidでは常に慣習となっており、デスクトップSafariは2017年にバージョン11でサウンドによるマルチメディアオートプレイの無効化を発表し、続いて2018年4月にChrome 66がサウンドオートプレイを正式に無効化し、デスクトップのブラウザでも <audio autopaly& gt; <video autoplay> が無効となることを意味しました。

グーグルの注意事項
自動再生可能な例外 上記で述べたように、動画自体がミュートに設定されている場合、ブラウザは自動再生のための読み込みをブロックしません。また、ユーザーが以前に自動再生をクリックしたことがある場合、ブラウザは次回同じサイトにアクセスしたときにデフォルトでブロックしません。モバイル端末では、ユーザーが頻繁に訪れるサイトをホーム画面に追加することを選択した場合、その場合も自動再生されます。
最後に:Googleの統計によると、動画サイトなど再生回数が多いサイトは、自動再生もブロックされないそうです。

htmlページに音楽ビデオを追加する方法は以上です。htmlページに音楽ビデオを追加する方法については、スクリプトハウスの過去の記事を検索するか、以下の記事を引き続きご覧ください。