HTML 5 视频/DOM

HTML5 <video>可以使用 DOM 进行控制，它同样拥有方法、属性以及事件

清浅更新时间：2019-01-17 10:31:14

具体内容
相关视频
相关知识
最新评论

HTML 5 Video + DOM

HTML5 <video>可以使用 DOM 进行控制

HTML5 <video> 元素同样拥有方法、属性和事件。

其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。

实例

<script type="text/javascript">
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> 
<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="movie01.mp4" type="video/mp4" />
  </video>
</div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图：

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

推荐手册

HTML 5 视频/DOM

实例