Detailed explanation of HTML5 Video tag-H5 Tutorial-php.cn

Detailed explanation of HTML5 Video tag

黄舟

Release： 2017-05-19 17:24:49

Original

4470 people have browsed it

In the previous article Xiaoqiang's HTML5 mobile development road (5) - Making a beautiful video player, I made a very easy-to-use player. Some friends don't know much about the principles. This This article will provide an in-depth analysis of the use of the

1. Usage skills

In HTML5, you can use the

<video src="move.mp4"></video>

Copy after login

The video tag has Many attributes, such as the controls attribute, can control whether there is a console.

<video src="move.mp4" controls="controls">  
    浏览器不支持HTML5的视频播放功能  
</video>

Copy after login

From the above video formats, we can see that different browsers support different video formats, so we can use the tag to specify videos in multiple formats. By default, the browser will automatically Start downloading the file to determine its type.

<video width="400" controls="controls">  
    <source src="move.mp4"  type="video/mp4" />  
    <source src="move.ogg"  type="video/ogg" />  
</video>

Copy after login

2. Attributes of Video tag

The video tag supports global attributes and event attributes in HTML5

The unique attributes are as follows:

Attributes Value Description

autoplay

# Controls Controls If this attribute appears, it will display the control to the user, such as the play button.

height pixels Set the height of the video player.

Loop Loop If this attribute appears, it will start playing again after the media file is completed.

preload preload

If this attribute appears, the video will be loaded when the page is loaded and will be ready to play.

If "autoplay" is used, this attribute is ignored.

src url The URL of the video to be played.

width pixels Set the width of the video player.

Video methods and attribute events supported by most browsers

Methods Attributes Events

play() currentSrc play

pause() currentTime currentTime pause

load() videoWidth progress

canPlayType videoHeight

paused empty

volume loadedmetadata

height

width

注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。

三、从实例中了解Video标签的使用

<!DOCTYPE html>   
<html>   
<body>   
    <p style="text-align:center;">  
      <!--定义按钮，并添加事件监听函数-->  
      <button onclick="playPause()">播放/暂停</button>   
      <button onclick="makeBig()">大</button>  
      <button onclick="makeNormal()">中</button>  
      <button onclick="makeSmall()">小</button>  
      <br />   
      <video id="video1" width="420" style="margin-top:15px;">  
        <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />  
          <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" />  
          <source src="http://demo.inwebson.com/html5-video/iceage4.ogv" type="video/ogg" />  
          <p>您的浏览器不支持此HTML5标签</p>  
      </video>  
    </p>   
  
    <script type="text/javascript">  
        //得到video标签对象  
        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

Detailed explanation of HTML5 Video tag