Detailed explanation of video code in HTML5-H5 Tutorial-php.cn

Detailed explanation of video code in HTML5

寻∝梦

Release： 2018-08-13 18:53:01

Original

3634 people have browsed it

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">

Copy after login

Your browser does not support the HTML5 video tag.

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">

Copy after login

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>

Copy after login

HTML5 Video tag

Define multiple media resources, such as

Defining 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">

Copy after login

Your browser does not support the HTML5 video tag.

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

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!