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)->

Optional can clearly express intentions and reduce code noise for null judgments. 1. Optional.ofNullable is a common way to deal with null objects. For example, when taking values ??from maps, orElse can be used to provide default values, so that the logic is clearer and concise; 2. Use chain calls maps to achieve nested values ??to safely avoid NPE, and automatically terminate if any link is null and return the default value; 3. Filter can be used for conditional filtering, and subsequent operations will continue to be performed only if the conditions are met, otherwise it will jump directly to orElse, which is suitable for lightweight business judgment; 4. It is not recommended to overuse Optional, such as basic types or simple logic, which will increase complexity, and some scenarios will directly return to nu.

The core workaround for encountering java.io.NotSerializableException is to ensure that all classes that need to be serialized implement the Serializable interface and check the serialization support of nested objects. 1. Add implementsSerializable to the main class; 2. Ensure that the corresponding classes of custom fields in the class also implement Serializable; 3. Use transient to mark fields that do not need to be serialized; 4. Check the non-serialized types in collections or nested objects; 5. Check which class does not implement the interface; 6. Consider replacement design for classes that cannot be modified, such as saving key data or using serializable intermediate structures; 7. Consider modifying

In Java, Comparable is used to define default sorting rules internally, and Comparator is used to define multiple sorting logic externally. 1.Comparable is an interface implemented by the class itself. It defines the natural order by rewriting the compareTo() method. It is suitable for classes with fixed and most commonly used sorting methods, such as String or Integer. 2. Comparator is an externally defined functional interface, implemented through the compare() method, suitable for situations where multiple sorting methods are required for the same class, the class source code cannot be modified, or the sorting logic is often changed. The difference between the two is that Comparable can only define a sorting logic and needs to modify the class itself, while Compar

JavaSocket programming is the basis of network communication, and data exchange between clients and servers is realized through Socket. 1. Socket in Java is divided into the Socket class used by the client and the ServerSocket class used by the server; 2. When writing a Socket program, you must first start the server listening port, and then initiate the connection by the client; 3. The communication process includes connection establishment, data reading and writing, and stream closure; 4. Precautions include avoiding port conflicts, correctly configuring IP addresses, reasonably closing resources, and supporting multiple clients. Mastering these can realize basic network communication functions.

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

Method reference is a way to simplify the writing of Lambda expressions in Java, making the code more concise. It is not a new syntax, but a shortcut to Lambda expressions introduced by Java 8, suitable for the context of functional interfaces. The core is to use existing methods directly as implementations of functional interfaces. For example, System.out::println is equivalent to s->System.out.println(s). There are four main forms of method reference: 1. Static method reference (ClassName::staticMethodName); 2. Instance method reference (binding to a specific object, instance::methodName); 3.

There are three common ways to parse JSON in Java: use Jackson, Gson, or org.json. 1. Jackson is suitable for most projects, with good performance and comprehensive functions, and supports conversion and annotation mapping between objects and JSON strings; 2. Gson is more suitable for Android projects or lightweight needs, and is simple to use but slightly inferior in handling complex structures and high-performance scenarios; 3.org.json is suitable for simple tasks or small scripts, and is not recommended for large projects because of its lack of flexibility and type safety. The choice should be decided based on actual needs.
