HTML Video 组件：添加、控制、方法和属性

以下是加载视频的代码：

<video id='myvideo' controls='controls' width='320' height='240' autoplay='autoplay' loop='0'>
    <source src='movie.ogg' type='video/ogg'>
    <source src='movie.mp4' type='video/mp4'>
    抱歉，你的浏览器不支持video组件
</video>

直接在页面上添加一个 video 组件：

<video id='myvideo' controls='controls' width='320' height='240' autoplay='autoplay' loop='0'>
<source src='movie.ogg' type='video/ogg'>
<source src='movie.mp4' type='video/mp4'>
抱歉，你的浏览器不支持video组件
</video>

增加控制按钮：

<div class='video_example'>
    <div class='btn_ctrl'>
        <button onClick='playPause()'>播放/暂停</button>
        <button onClick='makeBig()'>大</button>
        <button onClick='makeSmall()'>小</button>
    </div>
    <div class='mov_area'>
        <video id='video1' width='420'>
            <source src='movie.ogg' type='video/ogg'>
<source src='movie.mp4' type='video/mp4'>
抱歉，你的浏览器不支持video组件
        </video>
    </div>
</div>
<script type='text/javascript'>
var myVideo=document.getElementById('video1');
function playPause() {
    if (myVideo.paused)
    myVideo.play();
    else
    myVideo.pause();
}
function makeBig() {
    myVideo.width=580;
}
function makeSmall() {
    myVideo.width=320;
}
</script>

Video组件方法、属性及事件

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

截图：

[截图内容]