How to add, play and control videos in HTML

With the development of Internet technology, more and more websites are beginning to use videos to display content. For website developers, how to add videos to web pages and make them play normally is a common question. This article will introduce how to add, play and control videos in HTML.

1. Video tag in HTML5

The way to add a video in HTML5 is to add a video tag in the HTML code. Specifically, use the following tags:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

In this code, the "src" attribute is used to define the URL of the video file. As shown in the above code, "movie.mp4" and "movie.ogg" represent the video respectively. MP4 and OGG formats. If the browser supports video playback, one of them will be selected to play. If neither video is supported, the content in the last tag will be displayed. "Your browser does not support the video tag."

Among them, "width" and "height" can be used to specify the width and height of the video. The controls attribute is used to add a control bar for the video player.

2. Control video playback

After adding the video, we can control the video through the following code:

var video = document.getElementsByTagName("video")[0];
video.play(); //播放
video.pause(); //暂停
video.currentTime = 0; //设置当前时间为 0 秒
video.volume = 0.5; //设置音量为一半

Among them, "play()" and "pause() ” functions are used to play and pause the video respectively, the currentTime attribute is used to set the current time of video playback, and the volume attribute is used to set the volume of the video.

3. Support video files in multiple formats

In order to allow more browsers to support video playback, video files in multiple formats can be used and multiple sources can be provided at the same time.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

Three different formats are provided here for different browsers and operating systems, trying to ensure the breadth of video coverage.

4. Video preloading option

The video tag in HTML5 also provides the preload attribute. You can choose to download the video in advance when the page is loaded to avoid video lag.

Supports three values ​​for the preload attribute:

• preload = "none": Do not download in advance.
• preload = "metadata": Metadata of the downloaded video, such as: video duration, audio track and other information.
• preload = "auto" : Download the entire video file.

When the preload attribute is assigned the value "auto", the video will be downloaded during the page loading process. At this time, the loading status of the video can be obtained through JavaScript.

var video = document.getElementsByTagName("video")[0];
video.load(); //下载整个视频文件
console.log(video.buffered.end(0)); //输出已下载部分

5. Using YouTube videos in web pages

In addition to directly embedding video files through video tags, you can also embed YouTube videos for video playback. The specific implementation method is as follows:

• First you need to find the video you want to embed on YouTube.
• Add the following HTML code to the page:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

ps: The "VIDEO_ID" here is the unique identifier for the video.

• Then adjust the CSS style in the standard way.

6. Browser compatibility

The method of adding video in HTML5 has been widely supported in modern browsers, but there are still some older browsers There is an issue with not supporting HTML5 videos. These browsers can support video playback via JavaScript and Flash.

• Via JavaScript: You can use libraries such as video.js or JWPlayer.
• Through Flash: Embed the Flash player in the page through swfobject and swfmedia, and then load the video.

Summary

This article introduces how to add, play and control videos in HTML, and introduces some commonly used playback features. During the actual development process, developers should pay attention to compatibility issues and provide video files in a variety of different formats to ensure that each browser can perfectly support video playback.

The above is the detailed content of How to add, play and control videos in HTML. For more information, please follow other related articles on the PHP Chinese website!