How much do you know about pictures and videos?

Time:2021-6-5

Abstract: in this article, you’ll see how to insert images and videos into HTML, which is responsible for the structure of web pages. Very suitable for beginners! One day, Mirs rose in the same wind and soared up to 90000 Li! Study together, progress together!


1. Pictures in HTML

The development of HTML5<figure>and<figcaption>It provides a semantic container for the image, and establishes a clear relationship between the title and the image.<figcaption>Element tells the browser and other auxiliary technical tools that this description describes<figure>The content of the element.<figure>It can be several pictures, a piece of code, audio and video, equations or tables, etc.

The code is as follows:

<figure>
  <img
  
   height="300">
  In 1947, Andy, a banker, was accused of shooting his wife and lover. Andy was sentenced to life imprisonment, which means he will spend the rest of his life in Shawshank prison</ figcaption>
</figure>

The effect picture is as follows:
<figure>
<img

height=”300″>
In 1947, Andy, a banker, was accused of shooting his wife and lover. Andy was sentenced to life imprisonment, which means he will spend the rest of his life in Shawshank prison</ figcaption>
</figure>

Summary: if images are meaningful to your content, you should use HTML images. If it is purely decoration, you should use CSS background image to better control the image and set the position of the image.

2. Video and audio in HTML

First look at the code:

<video controls>
  <p>Your browser doesn't support HTML5 video, you can click < a = "rabbit320. MP4" > this link < / a > to watch</p>
</video>

The effect is as follows (on the premise that you need the resources of the video to open the video)
<video controls>
<p>Your browser doesn’t support HTML5 video, you can clickThis linkWatch</p>
</video>

  • Among them, SRC points to the video resources you want to embed in the web page; Controls to control playback and volume.<video>The content in the tag is called backup content when the browser does not support it<video>This will be displayed when you’re ready.
  • next,
    We take SRC from<video>Remove it in a few separate boxes<source>In this way, the browser will check the<source>And play the first media that matches itself. Your video should include two formats: WebM and MP4. At present, these two formats are enough to support most platforms and browsers.<source>IntypeAttribute is optional. It is recommended to add that it contains the MIME types of the video file, and will skip those unsupported formats. If you don’t, the browser will try to load every file until it finds a correct format, which will consume a lot of time and resources.
<video controls>
  <source type="video/mp4">
  <source type="video/webm">
  <p>Your browser doesn't support HTML5 video, you can click < a = "rabbit320. MP4" > this link < / a > to watch</p>
</video>

be careful:<audio>The usage is almost the same<video>It’s exactly the same. I won’t go into details here.

  • Let’s look at a very meaningful label<track>It can provide subtitles for people who can’t understand / can’t play audio conveniently / can’t hear. Of course, we need to use a webvtt text format. A typical webvtt file is as follows (the specific writing method of this file can be found in the relevant information, and many blogs on the Internet have written the relevant writing method)

WEBVTT
1
00:00:22.230 –> 00:00:24.606
The first subtitle

2
00:00:30.739 –> 00:00:34.074
The second paragraph

  • To save the file with. VTT suffix;
  • <track>Link. VTT file, need to put in<audio>or<video>In the middle,<source>After that, use thekindIndicate which type (eg: subtitles / captions / descriptions) it issrclangTell the browser the language you use.
<video controls>
  <source type="video/mp4">
  <source type="video/webm">
  <track kind="subtitles" srclang="en">
  <p>Your browser doesn't support HTML5 video, you can click < a = "rabbit320. MP4" > this link < / a > to watch</p>
</video>

<video controls>
<source type=”video/mp4″>
<source type=”video/webm”>
<track kind=”subtitles” srclang=”en”>
<p>Your browser doesn’t support HTML5 video, you can clickThis linkWatch</p>
</video>

All of the above are important knowledge points summarized by referring to the most authoritative MDN web docs. I would like to share with you. Imperfections, comments area welcome you!