search

Home >Web Front-end >H5 Tutorial >Detailed explanation of video code in HTML5

Detailed explanation of video code in HTML5

寻∝梦
寻∝梦Original
2018-08-13 18:53:013654browse

This article mainly talks about some chapters of HTML5Video, which is more suitable for novices to learn some things about HTML5. Let’s try the structure of this element.

HTML5 Video

Many sites use videos. HTML5 provides a standard for displaying videos.

Videos on Web Sites

Until now, there was no standard for displaying videos on web pages.

Today, most videos are displayed through plug-ins (such as Flash). However, not all browsers have the same plugins.

HTML5 specifies a standard way to include video through the video element.

Browser support

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the element.

Note: Internet Explorer 8 or earlier IE versions do not support the element .

HTML5 (Video) - How it works

To display a video in HTML5, all you need is: 

<!DOCTYPE html>
<html>
<head>
<title>PHP中文网</title>
</head>
<body>
<video width="320" height="240" controls>
  <source src="/statics/demosource/movie.mp4" type="video/mp4">
  <source src="/statics/demosource/movie.ogg" type="video/ogg">

Your browser does not support the HTML5 video tag.

a6a9c6d3f311dabb528ad355798dc27d

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

element provides play, pause and volume controls to control video.

At the same time, the element element also provides width and height attributes to control the size of the video. If the height and width are set, the required video space will be reserved when the page is loaded. . If these properties are not set and the browser does not know the size of the video, the browser will not be able to reserve a specific space when loading, and the page will change based on the size of the original video. The content inserted between the

and tags is provided for display by browsers that do not support the video element. The

element supports multiple elements. Elements can link different video files. The browser will use the first format it recognizes:

HTML5 - Controlled using the DOM

HTML5 and elements also have methods, properties, and events.

The methods, properties and events of the and elements can be controlled using JavaScript.

The methods include play, pause and load. The properties (such as duration, volume, etc.) can be read or set. The DOM events can notify you, for example, when an element starts playing, is paused, has stopped, etc.

The simple method in the example shows us how to use the element, read and set attributes, and how to call methods. 

<!DOCTYPE html> 
<html> 
<body> 
<div style="text-align:center"> 
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">缩小</button>
  <button onclick="makeNormal()">普通</button>
  <br> 
  <video id="video1" width="420">
    <source src="/statics/demosource/mov_bbb.mp4" type="video/mp4">
    <source src="/statics/demosource/mov_bbb.ogg" type="video/ogg">

Your browser does not support the HTML5 video tag. 

</video>
</div> 
<script> 
var myVideo=document.getElementById("video1"); 
function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 
function makeBig()
{ 
myVideo.width=560; 
} 
function makeSmall()
{ 
myVideo.width=320; 
} 
function makeNormal()
{ 
myVideo.width=420; 
} 
</script> 
</body> 
</html>

HTML5 Video tag

39000f942b2545a5315c57fa3276f220Define a video

e02da388656c3265154666b7c71a8ddcDefine multiple media resources, such as 39000f942b2545a5315c57fa3276f220 and b97864c2e0ef2353a16c4d64c7734e92

9bf7cbf2c39baa37076a22499de2f6edDefining a text track in the media player

HTML5 (Video) - How it works

To display video in HTML5, all you need is:

<!DOCTYPE html>
<html>
<head>
<title>PHP中文网</title>
</head>
<body>
<video width="320" height="240" controls>
  <source src="/statics/demosource/movie.mp4" type="video/mp4">
  <source src="/statics/demosource/movie.ogg" type="video/ogg">

Your browser does not support the HTML5 video tag.

a6a9c6d3f311dabb528ad355798dc27d

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

element provides play, pause and volume controls to control video.

At the same time, the element element also provides width and height attributes to control the size of the video. If the height and width are set, the required video space will be reserved when the page is loaded. . If these properties are not set and the browser does not know the size of the video, the browser will not be able to reserve a specific space when loading, and the page will change based on the size of the original video. The content inserted between the

and tags is provided for display by browsers that do not support the video element.

[Related recommendations]

The basic elements of html, allowing you to learn HTML from scratch

HTML5 usage Video element

The above is the detailed content of Detailed explanation of video code in HTML5. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html5 firefox chrome safari html 事件 dom
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：What is the use of html5 canvas? Detailed explanation of the latest canvas element in HTML5Next article：What is the use of html5 canvas? Detailed explanation of the latest canvas element in HTML5

Related articles

See more