Home > Article > Web Front-end > Detailed explanation of HTML5 Video tag

Detailed explanation of HTML5 Video tag

黄舟Original: 2017-05-19 17:24:494438browse

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>

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>

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>

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>

Detailed explanation of HTML5 Video tag

【相关推荐】

1. 详解html5的video标签测试应用

2. html 5中使用video元素制作一个影片播放器

3. H5 video标签只能放声音不能放视频的解决办法

4. 分享一个video标签无法播放mp4的问题以及解决方案

5. IIS的MIME未注册MP4类型，导致无法识别vidoe标签的解决办法

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：Xiaoqiang’s road to HTML5 mobile development (13) - Global attributes in HTML5Next article：Xiaoqiang’s road to HTML5 mobile development (13) - Global attributes in HTML5

See more

Detailed explanation of HTML5 Video tag

Related articles