This is the 14th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge
Thank you for meeting me. Hi, I’m Ken
Author: Please call me Ken link: juejin.cn/user/109118… Source: gold mining copyright belongs to the author. Commercial reprint please contact the author to obtain authorization, non-commercial reprint please indicate the source.
🌊🌈
Part of the content and pictures of this article are from the Internet. If you have any questions, please contact me (there is an official account in the introduction of the homepage).
This blog is suitable for those who are new to HTML and those who want to review after a long time
🌊🌈 About:
8.3 Embedding video and audio
Next, we will further explain how to embed video and audio and how to call multimedia files, so that readers can skillfully create video and audio files with video and audio elements.
8.3.1 Embedding video in HTML5
In HTML5, the video tag is used to define the standard for playing video files. It supports three video formats, Ogg, WebM and MPEG4. The basic syntax format is as follows:
<video src="Video file path" controls="controls"></video>
Copy the codeIn the syntax above, the SRC property is used to set the path to the video file, and the Controls property is used to provide a playback control for the video. These two properties are the basic properties of the video element. You can also insert text between < video> and < /video> for display in browsers that do not support the video element.
The Controls property specifies that the browser should provide playback controls for the video. _ Browser controls should include: play, pause, position, volume, full screen toggle, captioning (if available), audio track (if available).
Example: Demonstrate the method of embedding visual ton,
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Embed video in HTML5</title>
</head>
<body>
<video src="video/pian.mp4" controls="controls">The browser does not support the video tag</video>
</body>
</html>
Copy the code
It’s worth mentioning that there are other attributes that can be added to the video element to further optimize the performance of the video:
Common attributes of the video element
| attribute | value | describe |
|---|---|---|
| autoplay | autoplay | Play the video automatically when the page is loaded. |
| loop | loop | Restart when the video ends. |
| preload | auto/meta/none | If this property is present, the video is loaded when the page loads and is ready to play. If “autoplay” is used, this property is ignored. |
| poster | url | When the video buffer is insufficient, the property value links an image and displays the image in proportion. |
Based on the above example, apply new attributes to the video tag to optimize the video playback effect. The code is as follows:
<video src="video/pian.mp4" controls="ontrols" autoplay="autoplay" loop="loop">The browser does not support the video tag</video>
Copy the code
In the code above, I added “autoplay =” autoplay “” and” loop = “loop” “to the video element to achieve the effect of playing the video automatically and looping after the page loads.
8.3.2 Embed audio in HTML5
In HTML5, the audio tag is used to define the standard for playing audio files. It supports three audio formats, Ogg, MP3 and WAV. The basic syntax format is as follows:
<audio src="Normal video path" controls="controls"></audio>
Copy the codeIn the basic format above, the SRC property is used to set the file path, and the Controls property is used to provide playback controls for audio, much like the properties of the video element. Similarly, text can be inserted between < audio> and </ audio> for display in browsers that do not support the audio element.
Example: Demonstrate the method of embedding audio,
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Embed audio in HTML5</title>
</head>
<body>
<audio src="music/1.mp3" controls="controls">Browsers do not support the audio tag</audio>
</body>
</html>
Copy the code
It’s worth noting that there are other attributes you can add to the audio element to further optimize the audio playback:
Common attributes of the audio element
| attribute | value | describe |
|---|---|---|
| autoplay | autoplay | Play the audio automatically when the page is loaded |
| loop | loop | Restart when the audio ends |
| preload | preload | If this property is present, the audio is loaded when the page loads and is ready to play. If “autoplay” is used, this property is ignored |
The attributes of the audio element listed in the table above are the same as those of the video element, and these same attributes are common when embedded with audio and video.
8.3.3 Source element in sound and video
While HTML5 supports Ogg, MPEG4, and WebM video formats and Vorbis, MP3, and WAV audio formats, browsers don’t fully support these formats.
In order to enable sound and visual elements to play normally in various browsers, it is often necessary to provide sound and video files in various formats. In HTML5, the use of source elements can provide multiple backup files for video or audio elements. The basic format for adding audio using the source element is as follows:
<audio controls="controls">
<source src="Audio File Address" type="Media File Type/Format">
<source src="Audio File Address" type="Media File Type/Format">.</audlo>
Copy the codeIn the syntax format above, you can specify multiple source elements to provide alternate audio files to the browser. The source element typically sets two attributes.
- SRC: Specifies the URL of the media file.
- Type: specifies the type of the media file.
Example: Add an audio file to a page that works in Firefox 4.0 and Google 6.0
<audio controls="controls">
<source src="music/1.mp3" type="audio/mp3">
<source src="music/1.wav" type="audio/wav">
</audio>
Copy the code
In the above case, Firefox4.0 does not support MP3 audio files, so when you embed audio files in a web page, you also need to specify a WAV audio file through the source element to make it play properly in Firefox4.0.
The method of adding video to the source element is similar to that of adding audio. You only need to replace the audio tag with the video tag. The specific format is as follows:
<video controls="controls">
<source src="Video File Address" type="Media File Type/Format">
<source src="Video File Address" type="Media File Type/Format">
</video>
Copy the codeFor example, to add a video file to the page that plays normally in Firefox4.0 and IE9, the code is as follows.
<video controls="controls">
<source src="video/1.ogg" type="video/ogg">
<source src="video/1.mp4" type="video/mp4">
</video>
Copy the code
Hello, I’m Ken \
8.3.4 Invoking a Multimedia File on a Web page
There are two main ways to call multimedia files from a web page. One is to call a local multimedia file, as described in the previous section, and the other is to call an Internet multimedia file at a specified URL. In web design, a multimedia file can be invoked using the “SRC” property, which specifies not only the relative path of the multimedia file, but also a full URL address.
This section uses the URL of a song as an example to describe how to call a multimedia file on the Internet.
(1) Obtain the URL of audio and video files
Open the web page, enter the search keyword “MP3” in the search toolbar, the page will appear to download the songs of the website links, download when the pop-up download task, the URL is shown above is the audio, video file URL.
(2) Insert the URL address into the SRC attribute in the audio tag.
The method of calling the network video file is similar to the method of training the audio file. It also needs to obtain the URL of the relevant video file, and then insert the video file through the relevant generation.
Note:
Audio and video can be played only when the URL of the audio and video file exists.
8.4 THE CSS controls the video width and height
In HTML5, a certain space is often reserved for the video by adding width and height to the video element, so that the browser will pre-determine the size of the video when loading the page, and reserve appropriate space for it, so that the layout of the page does not change.
The next step is to explain the width and height properties of the video.
Example: Use the width and height properties to set the width and height of a video file.
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>CSS controls the width and height of the video</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
width: 600px;
height: 300px;
border: 1px solid # 000;
}
video {
width: 200px;
height: 300px;
background: #f90;
float: left;
}
p {
width: 200px;
height: 300px;
background: # 999;
float: left;
}
</style>
</head>
<body>
<h2>Video Layout Style</h2>
<div>
<p>Placeholder color piece</p>
<video src="#" controls="controls">The browser does not support the video tag</video>
<p>Placeholder color piece</p>
</div>
</body>
</html>
Copy the code
Set the width and height of the box, nest a video TAB and two P tabs inside it, set the width to 200px and the height to 300px, and use the float property to display them in a row.
Since the width and height of the video are defined, the page layout does not change.
Example: Change the code in the case to remove the width and height properties of the video,
video {
background: #F90;
float: left;
}
Copy the code
If the video width and height are not defined, the video is displayed in the original size. In this case, the browser has no predefined video size and can only load the video in the normal size. As a result, the page layout is confused.
Note: _ scales the video with the width and height properties, so even if the video looks small on the page, it will still be the original size, so use software to compress the video.
8.5 Video and audio methods and events
The video element is related to the audio element, and their interface methods and interface events are basically the same.
The following section covers the methods and events of the video and audio elements in detail.
1. Video and audio methods
HTML5 provides interface methods for video and Audio,
Video and audio
| methods | describe |
|---|---|
| load() | Load the media file in preparation for playback. Usually used for preloading before playing, but also for reloading media files |
| play() | Play media files. If the video is not loaded, it is loaded and played; If the video is paused, it changes to play |
| pause() | Pause the media file |
| canPlayType() | Tests whether the browser supports the specified media type |
2. Video and audio events
HTML5 also provides a series of interface events for video and audio elements,
Video and audio events
| The event | describe |
|---|---|
| play | Fired when the play() method is executed |
| playing | Triggered while playing |
| pause | Fired when the method pause() is performed |
| timeupdate | Triggered when the play position is changed |
| ended | Triggered when the playback stops after it has finished |
| waiting | Fires while waiting for the next frame to load |
| ratechange | Triggered when the current playback rate changes |
| volumechange | Triggered when the volume changes |
| canplay | Triggered when buffering is required at the current playback rate |
| canplaythrough | Triggered when buffering is not required at the current playback rate |
| durationchange | Triggered when playback duration changes |
| loadstart | Triggered when the browser starts looking for data on the web |
| progress | Triggered when the browser is fetching a media file |
| suspend | Triggered when the browser suspends fetching media files and file fetching does not end properly |
| abort | Triggered when the acquisition of media data is aborted. But the suspension was not caused by an error |
| error | Triggered when an error occurs during media acquisition |
| emptied | Triggered when the network becomes initialized |
| stalled | Triggered when the browser fails to obtain media data |
| loadedmetadata | Triggered when the media metadata has been loaded |
| loadeddata | Triggered when the media playback data for the current location has been loaded |
| seeking | Triggered when the browser is requesting data |
| seeked | Triggered when the browser stops requesting data |
The above two tables list common video and Audio methods and events. When reading or playing a media file using video and audio elements, a series of events are triggered. However, these events need to be captured in JavaScript scripts and can be processed accordingly. Therefore, it is not necessary to understand the events and methods of video and audio before learning JavaScript.
8.6 HTML5 audio and video trends
Until now, the HTML5 audio and video standard still needs to be improved. For example, the support for encoding and decoding, captioning control, as described below.
1. Streaming audio and video
Currently, there is no bitrate switching standard in the HTML5 video range, so support for videos is limited to full loading and then playing. However, streaming media format is an ideal format, which needs to be standardized in the future design.
2. Cross-resource sharing
HTML5 media is limited by HTTP sharing across resources. HTML5 provides a specific specification for cross-resource sharing, not just for audio and video.
3. Subtitles support
If you’re editing audio and video in HTML5, you might also need control over captions. A subtitle support specification based on the popular subtitle format SRT is still being written.
4. Support for encoding and decoding
One of the biggest drawbacks of using HTML5 is the lack of universal codec support. Over time, a common, efficient codec will eventually emerge, and multimedia in the future will be much richer than it is today.
That’s the end of today’s introductory study
Peace
🌊🌈
Akken’s HTML, CSS guide for getting started (1)_HTML basics akken’s HTML, CSS guide for getting started (2)_HTML page elements and attributes Akken’s HTML, CSS guide for getting started (3)_ Text style attributes Aken’s HTML, CSS getting started guide (four)_CSS3 selector Aken’s HTML, CSS getting Started guide (five)_CSS box model Aken’s HTML, CSS getting Started guide (six)_CSS box model Aken’s HTML, CSS getting Started guide (seven)_CSS box model Akken’s HTML, CSS guide for getting started (eight)_CSS box model akken’s HTML, CSS guide for getting Started (nine)_ Floating and positioning Akken’s HTML, CSS guide for getting started (ten)_ Floating and positioning Akken’s HTML, CSS Guide for getting started (eleven)_ Floating and positioning Ken’s HTML, CSS guide for getting started (12)_ Form application of HTML, CSS guide for getting started (13)_ form application of HTML, CSS guide for getting started (14)_ Form application of HTML, CSS guide for getting started (15)_ Form application Ken’s HTML, CSS guide for getting started (16) _ Multimedia technology
🌊🌈 About postscript:
Thank you for reading, I hope it can help you if there are flaws in the blog, please leave a message in the comment area or add contact information in the personal introduction of the home page
Original is not easy, “like” + “comment” thanks for supporting ❤