Example of adding music video to HTML page

1. Video tag

Supports automatic playback in Firefox, but not in Google and IE

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

Google can enable autoplay by adding muted

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

The principle is that most browsers support silent video playback.

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

2. Audio tag

Note: The tag defines a sound, such as music or other audio stream.

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

Note: Only music can be loaded, not video

3.embed

Supports multiple players

Autoplay supports Android, but not iOS. It supports Google IE and Edge, but not Firefox.

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

Additional notes:

It has always been a common practice on iOS and Android that audio cannot be played automatically. The desktop version of Safari also announced in version 11 in 2017 that it would disable the automatic playback of multimedia with sound. Then, Chrome 66 released in April 2018 also officially turned off the automatic playback of sound, which means that <audio autopaly> <video autoplay> will also be invalid on the desktop version of the browser.

Google explains:
Exception conditions for automatic playback: As mentioned above, if the video itself has been set to mute, the browser will no longer block its loading for automatic playback. At the same time, if the user has clicked on auto-play before, the browser will not block the playback by default when visiting the same website next time. On mobile devices, if the user chooses to add the website to the home screen, that is, the website that is frequently visited, it can also be played automatically in this case.
Finally: According to Google statistics, if the website video is played in large quantities, such as video websites, the automatic play function will not be blocked in this case

This is the end of this article about the implementation example of adding music videos to HTML web pages. For more relevant content about adding music videos to HTML, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!