HTML 5 基础教程

HTML是超文本标记语言，是一种专门用来制作网页的语言，而HTML5就是它的第五个版本，2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成，该标准针对当前互联网的飞速发展制定了更加标准的网页语言规范及适用功能，同时也给我们开发者带来了更多的开发选择，学习它是每个前端开发者必修的课程。

W3CAPI

2020-04-30 07:44:23

HTML5 使用DOM控制Video标签

在HTML中，它其中包含的所有标签元素，从DOM角度来看他们都有三大要素：属性、方法、事件；HTML5 <video> 标签和其他HTML标签一样也同样拥有方法、属性和事件。

video 标签中的方法用于控制视频的播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被我们动态的读取和设置。其中的 DOM 事件能够在视频开始播放、视频已暂停播放、视频已停止播放等状态时通知我们，我们利用事件回调函数进行相应的业务处理。

使用DOM控制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="video" width="420" style="margin-top:15px;">
        <source src="/upload/video/video_example.mp4" type="video/mp4" />
        <source src="/upload/video/video_example.ogg" type="video/ogg" />
        您的浏览器不支持Video标签
    </video>
</div>

<script type="text/javascript">

    var demoVideo=document.getElementById("video"); //使用DOM获取video对象

    function playPause()  {
        if (demoVideo.paused) //读取video播放状态属性
            demoVideo.play(); //调用video的方法，开始播放
        else
            demoVideo.pause(); //调用video的方法，暂停播放
    }

    function makeBig()  {
        demoVideo.width=560; //设置video宽度属性
    }

    function makeSmall()  {
        demoVideo.width=320;
    }

    function makeNormal()  {
        demoVideo.width=420;
    }

</script>

</body>
</html>

Video标签中的方法、属性以及事件列表

列表中列出了当今主流浏览器支持的video标签的方法、属性和事件，在下列列表的属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。其他属性在视频的元数据已加载后才可使用；对于每个属性、方法和事件的使用示例请参考《HTML 参考手册》

属性	方法	事件
currentSrc	play()	play
currentTime	pause()	pause
videoWidth	load()	progress
videoHeight		error
duration		timeupdate
ended		ended
error		abort
paused		empty
muted		emptied
seeking		waiting
volume		loadedmetadata
height
width