Detailed explanation of HTML5 video and audio tags: Building a responsive video player
This article is excerpted from the book "HTML5 & CSS3 for the Real World, 2nd Edition" co-authored by Alexis Goldstein, Louis Lazaris and Estelle Weyl. This book is available in major bookstores around the world, and you can also purchase the e-book version here.
After dealing with container, codec and licensing issues, let's study the markings of video elements and their related attributes.
The easiest way to include HTML5 videos in a web page is as follows:
<video src="example.webm"></video>
As mentioned in the previous sections, this only works in limited browsers. However, this is the smallest code to make HTML5 videos work to some extent. In an ideal world, it should work anywhere—like the img element—but it will take some time.
Similar to the img element, the video element can also contain width and height attributes:
<video height="280" src="example.webm" width="375"></video>
Although sizes can be set in markers, this does not affect the aspect ratio of the video. For example, if the video in the previous example is actually 375×240 and the marking is shown, the video will be vertically centered within the specified 280 pixel space. This prevents the video from being overstretched and appearing distorted.
Thewidth and height attributes only accept integers, and their values are always pixels. Of course, these values can be overwritten by script or CSS.
Any embedded video is indispensable to allow users to play, pause, stop, fast forward and backward, or adjust the volume. HTML5's video element contains a controls attribute which can do this:
<video src="example.webm" width="375" height="280" controls></video>
controls is a Boolean property, so no value is required. Its inclusion in the tag tells the browser to make the control visible and accessible to the user.
Each browser is responsible for the appearance of the built-in video controls. Figure 5.1 and Figure 5.2 show the differences in appearance of these controls across browsers.
We would love to ignore this property because it is not desirable in most cases; however, it may be appropriate in some cases. The boolean autoplay attribute fully matches the meaning of its name: it tells the webpage to play the video as soon as possible.
Usually this is a bad practice; most of us know how it would be if a website starts playing video or audio when it loads, especially when our speakers are turned up People are annoyed. Usability best practices stipulate that sounds and movements on web pages should only be triggered when requested by the user. But that doesn't mean that the autoplay attribute should never be used.
For example, if the relevant page contains only one video - that is, the user clicks a link to a page just to watch a specific video - then it can automatically play, depending on the size of the video, the surrounding content, viewing Platform and audience.
The following is how to use this property:
<video src="example.webm"></video>
Many (if not all) mobile browsers ignore the autoplay attribute, so the video will always start playing after the user presses the play button. This is reasonable considering that mobile bandwidth is usually limited and expensive.
Another available property that should be thought twice before using is the Boolean loop property. Again, it is easy to understand: according to the specification, this property will tell the browser to "return to the beginning of the resource when it reaches the end of the resource".
So if you create a web page, whose sole purpose is to get bored by the visitor, it might contain the following code:
<video height="280" src="example.webm" width="375"></video>
Auto play and infinite loop! We just need to remove the native controls and we can get the worst-practice trio.
Of course, like autoplay, loops are also useful in some cases: for example, in a browser-based game, ambient sounds and music should be played continuously when the page is opened.
Compared to the two properties discussed earlier, the preload property is very convenient in many cases. The preload property accepts one of three values:
The preload property does not have a specification defined default value when omitted; each browser will decide which of these three values should be the default state. This makes sense because it allows video and/or metadata to be automatically preloaded on a well-connected desktop browser without any actual adverse effects; but it allows mobile browsers to default to metadata or none, Because many mobile users have limited bandwidth and prefer to choose whether to download videos.
When you try to watch a video on the web, a single frame of the video is usually displayed to provide a trailer of its content. The poster attribute makes it easy to select such trailers. This property is similar to src and will point to the image file on the server via the URL.
The following are video elements with poster attribute:
<video src="example.webm"></video>
If the poster attribute is omitted, the default "poster" will be the first frame of the video, which will be displayed immediately after loading.
muted attribute (boolean type) controls the default state of the audio track of the video element.
Adding this property will cause the audio track of the video to be muted by default, which may overwrite any user preferences. This only controls the default state of the element - which can be changed by the user interacting with the control or JavaScript.
Add it to our video element:
<video height="280" src="example.webm" width="375"></video>
In previous versions of HTML5 specifications, there was a property named audio, which took the value muted. The new muted property replaces the now outdated audio property.
As we discussed, there is currently no way to use a single container format to serve your video, although this is indeed the philosophy behind the video element and what we hope to achieve in the near future. To include multiple video formats, the video element allows the definition of the source element so that you can allow each browser to display the video in its selected format. These elements have the same functionality as the src attribute on the video element, so if you provide the source element, you don't need to specify src for the video element.
To achieve full browser support, here is how to declare source elements:
<video src="example.webm" width="375" height="280" controls></video>
source element (strangely) has a src attribute that specifies the location of the video file. It also accepts a type attribute that specifies the container format of the requested resource. This subsequent property enables the browser to determine whether it can play related files, thus preventing it from unnecessarily downloading unsupported formats.
Thetype attribute also allows specifying codec parameters that define the video and audio codecs for the requested file. The following is the source element with the specified codec:
<video src="example.webm"></video>
You will notice that the syntax of the type attribute has been slightly modified to fit container and codec values. The double quotes used around the value have been changed to single quotes, and another set of nested double quotes are specifically used in the codec.
This may be a bit confusing at first glance, but in most cases, once you have a set of ways to encode your videos (which we will discuss later in this chapter), you just copy and paste the values. It is important that you define the correct value for the specified file to make sure that the browser can determine which (if any) file it can play.
Depending on the target audience of your website, you may not need three source elements to get full browser support. Support for video and audio codecs and containers is great, you may only need one or two combinations. To help you decide which formats to use, be sure to check out the latest browser support information on Can I use.
The three source elements are placed as child elements of the video element, and the browser used will select any container/codec format it recognizes - only download the resources it needs and ignore other resources. After declaring three file formats, our code now looks like this:
<video height="280" src="example.webm" width="375"></video>
You will notice that our code now does not have the src attribute on the video element. As mentioned earlier, including it in addition to redundancy will also overwrite any video file defined in the source element, so it must be omitted in this case.
The three source elements included in our video element will cover all modern browsers, but we have not yet ensured that our videos will play in older browsers. As mentioned earlier, you may still have a considerable number of users using browsers that do not support HTML5 videos. Most of these users are on a certain version before Internet Explorer 9.
To maintain the principle of elegant downgrade, the video element is designed so that older browsers can access videos in other ways. Any browser that does not recognize the video element will simply ignore it and its source child elements. However, if the video element contains content that the browser recognizes as valid HTML, it will read and display the content.
What can we provide for those unsupported browsers? According to Adobe, more than 1 billion desktop users have installed the Flash Player plugin on their systems. And most of these Flash plug-in instances are version 9 or higher, and they support the MPEG-4 video container format. With this in mind, to allow Internet Explorer 8 and earlier (and other older browsers that do not support HTML5 videos) to play our videos, we can declare an embedded Flash video as a fallback. Here is the complete code for the video on The HTML5 Herald, which contains the Flash fallback code:
<video src="example.webm" width="375" height="280" controls></video>
We will skip to detail how this newly added code works (it's not a book about Flash after all!), but here are a few things to note about adding this tag:
In addition to Flash fallback content, you can also provide an optional download video link that allows users to access a local copy of the video and watch it when they are free. This will ensure that no one can’t watch the video.
The last point to mention here is that, like the extra source element, your website may not have visitors from non-supported HTML5 video browsers, or you may not care about a small number of users using older browsers. In both cases, you can easily omit the Flash fallback content, thus simplifying the code.
HTML5 Video and Audio Tags is a feature introduced in HTML5 that allows you to embed video and audio elements directly into HTML code. This eliminates the need for external plug-ins or players, providing users with a seamless multimedia experience. The tag consists of <video></video> and <audio></audio> tags and some properties that allow you to control the behavior of these elements, such as autoplay, controls, loop, muted, and source.
"HTML5 video file not found" error usually occurs when the browser cannot find or access the video file specified in the source property of the <video></video> tag. This can be caused by a variety of reasons, such as incorrect file paths, file deletion, or server problems. Make sure the file path is correct and the video file is accessible to resolve this error.
Adding comments to HTML5 videos includes adding text, shapes, or other elements to the video to provide more information or highlight certain parts of the video. While HTML5 doesn't provide built-in annotation functionality, you can create custom annotations using JavaScript and CSS. Alternatively, you can use online tools such as VEED.IO, which provide easy-to-use video annotation tools.
Solve the "HTML5 video file not found" error including identifying the cause of the error and resolving it. If the file path is incorrect, correct it. If the file has been deleted, restore it or replace it with a new file. If there is a server problem, please contact your server administrator or hosting provider for assistance. In some cases, the video file may be corrupted, in which case you need to repair or replace the file.
If your HTML5 videos are not played in Firefox, it may be due to a variety of reasons. Firefox may not support the video format specified in the source attribute of the <video></video> tag. Browsers may also block videos due to security or privacy settings. Check the video format and browser settings to resolve this issue.
Repairing corrupted HTML5 video files includes using video repair tools. These tools analyze corrupt files and try to fix any errors or issues that prevent the files from playing correctly. Some popular video repair tools include Stellar Video Repair and Wondershare Repairit.
You can add controls for HTML5 videos by including the controls attribute in the <video></video> tag. This property adds a set of default controls to the video, including play/pause, volume, and full screen buttons. The control appears when the user hovers over the video.
Yes, you can automatically play HTML5 videos by including the autoplay attribute in the <video></video> tag. However, remember that many browsers block automatically playing videos with sounds to prevent interference with users. To ensure your videos are automatically played, consider muted with the muted property.
You can loop through HTML5 videos by including loop attributes in the <video></video> tag. This property causes the video to start over from the beginning after playback, creating a continuous loop.
Yes, you can specify multiple sources for HTML5 videos by including multiple <video></video> tags within the <source></source> tag. The browser will use the first source it can play. This allows you to provide multiple video formats for different browsers for maximum compatibility.
The above is the detailed content of HTML5 Video and Audio: The Markup - SitePoint. For more information, please follow other related articles on the PHP Chinese website!
java basic data types
What does mesh networking mean?
Introduction to the method of intercepting strings in js
pascal tutorial
The difference between article tag and section tag
How to restore server data
How to solve the problem of not being able to create a new folder in Win7
How to set up a secure VPS
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
