购物车
登陆 / 注册
微信扫码登陆

推荐手册

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()currentSrcplay
pause()currentTimepause
load()videoWidthprogress
canPlayTypevideoHeighterror

durationtimeupdate

endedended

errorabort

pausedempty

mutedemptied

seekingwaiting

volumeloadedmetadata

height

width
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号