Example of adding music video to HTML page

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!

<<:  Implementation of MySQL Multi-version Concurrency Control MVCC

>>:  Rainbow button style made with CSS3

Recommend

IE6 space bug fix method

Look at the code: Copy code The code is as follows...

mysql5.7.19 winx64 decompressed version installation and configuration tutorial

Recorded the installation tutorial of mysql 5.7.1...

Detailed steps to install MySQL 5.6 X64 version under Linux

environment: 1. CentOS6.5 X64 2.mysql-5.6.34-linu...

Zabbix3.4 method to monitor mongodb database status

Mongodb has a db.serverStatus() command, which ca...

Axios cancel request and avoid duplicate requests

Table of contents origin status quo Cancel reques...

A brief discussion on the types of node.js middleware

Table of contents Overview 1. Application-level m...

Vue implements login verification code

This article example shares the specific code of ...

vue+ts realizes the effect of element mouse drag

This article example shares the specific code of ...

Detailed explanation of the configuration method of Vue request interceptor

Follow the steps below 1. request.js content: htt...

Quickly master how to get started with Vuex state management in Vue3.0

Vuex is a state management pattern developed spec...

HTML form tag usage learning tutorial

Forms in HTML can be used to collect various type...

A practical record of troubleshooting a surge in Redis connections in Docker

On Saturday, the redis server on the production s...