小强的HTML5移动开发之路（14）——Video标签详解

来源：互联网发布：韩国淘宝模特孙允珠编辑：程序博客网时间：2024/05/17 00:12

来自：http://blog.csdn.net/dawanganban/article/details/18180605

在前面的小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器中制作了一个非常好用的播放器，有的朋友对其中的原理还不是很了解，这一篇文章将在前一篇的基础上深入剖析<video>标签的使用。

一、使用技巧

在html5中可以使用<audio>或者<video>标签播放html5媒体，使用方式如下：
<video src="move.mp4"></video>
video标签中有很多属性，例如controls属性可以控制是否有控制台。
<video src="move.mp4" controls="controls">
    浏览器不支持HTML5的视频播放功能
</video>
从上面的视频格式中我们可以看到不同的浏览器支持不同的视频格式，这样我们可以采用<source>标签指定多种格式的视频，默认情况下浏览器会自动启动下载文件来确定其类型。
<video width="400" controls="controls">
    <source src="move.mp4"  type="video/mp4" />
    <source src="move.ogg"  type="video/ogg" />
</video>

二、Video标签的属性

video标签支持HTML5中的全局属性和事件属性
特有属性如下：
属性值描述autoplayautoplay如果出现该属性，则视频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。heightpixels设置视频播放器的高度。looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。preloadpreload
如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
srcurl要播放的视频的 URL。widthpixels设置视频播放器的宽度。
大多数浏览器支持的视频方法、属性事件
方法属性事件play()currentSrcplaypause()currentTimepauseload()videoWidthprogresscanPlayTypevideoHeighterror durationtimeupdate endedended errorabort pausedempty mutedemptied seekingwaiting volumeloadedmetadata height width 注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。

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

<!DOCTYPE html>
<html>
<body>

    <div 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>
    </div>

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

0 0