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

Detailed explanation of the use of Vue Smooth DnD, a draggable component of Vue

Table of contents Introduction and Demo API: Cont...

VMware vsphere 6.5 installation tutorial (picture and text)

vmware vsphere 6.5 is the classic version of vsph...

A brief discussion on ifnull() function similar to nvl() function in MySQL

IFNULL(expr1,expr2) If expr1 is not NULL, IFNULL(...

Practice using Golang to play with Docker API

Table of contents Installing the SDK Managing loc...

Why is it not recommended to use index as the key attribute value in Vue?

Table of contents Preface The role of key The rol...

Debian virtual machine created by VirtualBox shares files with Windows host

the term: 1. VM: Virtual Machine step: 1. Downloa...

How to install and modify the initial password of mysql5.7.18

For Centos installation of MySQL, please refer to...

Tutorial on installing JDK Tomcat MySQL on Linux (remote access using Mac)

One environment Alibaba Cloud Server: CentOS 7.4 ...

MySQL database basic syntax and operation

MySQL database basic syntax DDL Operations Create...

Example code for CSS pseudo-classes to modify input selection style

Note: This table is quoted from the W3School tuto...

A brief discussion on the efficiency of MySQL subquery union and in

Recent product testing found a problem that when ...