In web development, using HTML5's

In web development, embedding videos and controlling them is not difficult. HTML5 provides native <video></video> tags, which allow you to easily add videos to the page and realize playback, pause, volume adjustment and other functions through simple properties or JavaScript.

Basic embedding method

The easiest way to put a video into a web page is to use the <video></video> element of HTML. You only need to specify the path of the video and some basic properties:

 <video src="myvideo.mp4" controls></video>

This will display a video player with default controls (play, pause, progress bar, etc.). Common formats such as MP4, WebM and Ogg are widely supported.

If you want to be compatible with multiple browsers, it is recommended to provide multiple formats:

 <video controls>
  <source src="myvideo.mp4" type="video/mp4">
  <source src="myvideo.webm" type="video/webm">
  Your browser does not support video playback.
</video>

Custom control buttons

Although the default controls are convenient, sometimes you want to use your own style or add more features. At this time, JavaScript can be used to control video behavior.

For example, you can write several buttons to implement playback, pause, mute and other functions:

 <video id="myVideo" src="myvideo.mp4"></video>

<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>
<button onclick="muteVideo()">Mute/Unmute</button>

<script>
  const video = document.getElementById(&#39;myVideo&#39;);

  function playVideo() {
    video.play();
  }

  function pauseVideo() {
    video.pause();
  }

  function muteVideo() {
    video.muted = !video.muted;
  }
</script>

This method allows you to fully control the appearance and interaction of the interface, and is suitable for projects that require a customized style.

Controlling automatic playback and preloading

Automatic play is common on many websites, but it is important to note that browsers usually limit automatic playback behavior without user interaction. If you want the video to play automatically without sound, you can set it like this:

 <video src="myvideo.mp4" autoplay muted playsinline loop></video>

• autoplay : autoplay
• muted : muted playback (bypass browser restrictions)
• playsinline : Inline playback on mobile terminal (not full screen)
• loop : loop playback

If you don't want the video to load all content from the beginning, you can use preload property to control the loading strategy:

• preload="auto" : The browser should preload as much as possible
• preload="none" : not preloaded
• preload="metadata" : only load metadata (duration, size, etc.)

Video style and responsive processing

In order to adapt video to different devices, it is generally used with CSS. You can use width: 100% to fill the parent container while maintaining the aspect ratio:

 <video src="myvideo.mp4" style="width: 100%; height: auto;"></video>

You can also use media query or object-fit properties to further optimize the display effect.

If the background video is embedded, you can also add poster attribute to set the cover image to improve the first screen experience:

 <video src="myvideo.mp4" poster="preview.jpg" muted autoplay loop></video>

Basically that's it. With these methods mastered, you can flexibly embed and control video content in web pages.

The above is the detailed content of How to embed and control video content with html?. For more information, please follow other related articles on the PHP Chinese website!