Using the HTML `` and `` elements for media.
Jul 02, 2025 pm 03:10 PMThe
In web development, <audio></audio>
and <video></video>
are two very practical HTML elements that allow us to easily embed audio and video content in the page without relying on third-party plugins. These two tags natively support multiple formats and provide rich control options.

Basic usage: How to use <audio></audio>
and <video></video>
To insert an audio or video file, the easiest way to write it is like this:

<audio src="music.mp3" controls></audio> <video src="movie.mp4" controls></video>
-
src
attribute specifies the path to the media file; -
controls
means that the browser comes with control strips (play, pause, volume, etc.) will be displayed.
If you want to be compatible with multiple formats (such as some browsers do not support .webm
), you can write this:
<video controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> Your browser does not support the video tag. </video>
The browser will try to load the first format it supports in turn.

Control behavior: automatic playback, loop, mute
In addition to the basic playback function, you can also change the behavior of the media by adding properties:
-
autoplay
: start playback automatically; -
loop
: start again after the playback is over; -
muted
: default muted; -
preload
: controls whether media data is preloaded (optional values:auto
,metadata
,none
);
For example, let a background music automatically play and loop:
<audio src="background-music.mp3" autoplay loop muted></audio>
It should be noted that for user experience, many browsers limit the automatic playback function by default, especially non-silent content. Therefore, it is recommended to use it with muted
, or let the user trigger playback manually.
Custom styles and interactions
Although the browser comes with control strips, sometimes we want to have a more personalized look or operation. At this time, you can hide the default controls and implement the play button, progress bar and other functions yourself:
<video id="myVideo" src="movie.mp4"></video> <button onclick="document.getElementById('myVideo').play()">Play</button> <button onclick="document.getElementById('myVideo').pause()">Pause</button>
You can listen to events through JavaScript, such as:
const video = document.getElementById('myVideo'); video.addEventListener('ended', function() { alert('Video ended'); });
This approach is suitable for scenarios that require a deeply customized playback experience, such as making your own UI interface or interactive course player.
Basically that's it. By mastering the basic structure, control properties and custom methods of <audio></audio>
and <video></video>
, you can meet most web media needs.
The above is the detailed content of Using the HTML `` and `` elements for media.. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

There are three common methods to traverse Map in Java: 1. Use entrySet to obtain keys and values at the same time, which is suitable for most scenarios; 2. Use keySet or values to traverse keys or values respectively; 3. Use Java8's forEach to simplify the code structure. entrySet returns a Set set containing all key-value pairs, and each loop gets the Map.Entry object, suitable for frequent access to keys and values; if only keys or values are required, you can call keySet() or values() respectively, or you can get the value through map.get(key) when traversing the keys; Java 8 can use forEach((key,value)->

To deal with character encoding problems in Java, the key is to clearly specify the encoding used at each step. 1. Always specify encoding when reading and writing text, use InputStreamReader and OutputStreamWriter and pass in an explicit character set to avoid relying on system default encoding. 2. Make sure both ends are consistent when processing strings on the network boundary, set the correct Content-Type header and explicitly specify the encoding with the library. 3. Use String.getBytes() and newString(byte[]) with caution, and always manually specify StandardCharsets.UTF_8 to avoid data corruption caused by platform differences. In short, by

std::chrono is used in C to process time, including obtaining the current time, measuring execution time, operation time point and duration, and formatting analysis time. 1. Use std::chrono::system_clock::now() to obtain the current time, which can be converted into a readable string, but the system clock may not be monotonous; 2. Use std::chrono::steady_clock to measure the execution time to ensure monotony, and convert it into milliseconds, seconds and other units through duration_cast; 3. Time point (time_point) and duration (duration) can be interoperable, but attention should be paid to unit compatibility and clock epoch (epoch)

HashMap implements key-value pair storage through hash tables in Java, and its core lies in quickly positioning data locations. 1. First use the hashCode() method of the key to generate a hash value and convert it into an array index through bit operations; 2. Different objects may generate the same hash value, resulting in conflicts. At this time, the node is mounted in the form of a linked list. After JDK8, the linked list is too long (default length 8) and it will be converted to a red and black tree to improve efficiency; 3. When using a custom class as a key, the equals() and hashCode() methods must be rewritten; 4. HashMap dynamically expands capacity. When the number of elements exceeds the capacity and multiplies by the load factor (default 0.75), expand and rehash; 5. HashMap is not thread-safe, and Concu should be used in multithreaded

JavaScript data types are divided into primitive types and reference types. Primitive types include string, number, boolean, null, undefined, and symbol. The values are immutable and copies are copied when assigning values, so they do not affect each other; reference types such as objects, arrays and functions store memory addresses, and variables pointing to the same object will affect each other. Typeof and instanceof can be used to determine types, but pay attention to the historical issues of typeofnull. Understanding these two types of differences can help write more stable and reliable code.

InJava,thestatickeywordmeansamemberbelongstotheclassitself,nottoinstances.Staticvariablesaresharedacrossallinstancesandaccessedwithoutobjectcreation,usefulforglobaltrackingorconstants.Staticmethodsoperateattheclasslevel,cannotaccessnon-staticmembers,

High-frequency questions in Java interviews are mainly focused on basic syntax, object-oriented, multithreaded, JVM and collection frameworks. The most common questions include: 1. There are 8 basic Java data types, such as byte, short, int, long, float, double, char and boolean. It is necessary to note that String is not the basic data type; 2. Final is used to modify classes, methods or variables to represent immutable, and finally is used to ensure code execution in exception processing. Finalize is an Object class method for cleaning before garbage collection; 3. Multi-thread synchronization can be achieved through synchronized keywords, ReentrantLock, and vo.

The method of using preprocessing statements to obtain database query results in PHP varies from extension. 1. When using mysqli, you can obtain the associative array through get_result() and fetch_assoc(), which is suitable for modern environments; 2. You can also use bind_result() to bind variables, which is suitable for situations where there are few fields and fixed structures, and it is good compatibility but there are many fields when there are many fields; 3. When using PDO, you can obtain the associative array through fetch (PDO::FETCH_ASSOC), or use fetchAll() to obtain all data at once, so the interface is unified and the error handling is clearer; in addition, you need to pay attention to parameter type matching, execution of execute(), timely release of resources and enable error reports.
