H5的video元素实现的Demo
利用前一段时间听说是一个国乒选手之间的较量，路过就将其录制了下来。学到H5的Video元素是就将其作为素材写了一个Demo
属性以及说明：
|
属性 |
值 |
说明 |
|
src |
url |
要播放视频的URL |
|
autoplay |
autoplay |
视频就绪后立刻播放 |
|
controls |
controls |
添加播放、暂停和音量等控件 |
|
width |
像素 |
设置视频播放器的宽度 |
|
height |
像素 |
设置视频播放器的高度 |
|
loop |
loop |
设置视频是否循环播放 |
|
preload |
auto/none/metadata |
视频在页面加载时开始加载，并预备播放 |
|
startTime |
|
读取媒体的开始播放时间，通常为0 |
|
currentTime |
|
读取或修改媒体的当前播放位置 |
|
duration |
|
读取媒体总的播放时间 |
|
volume |
0~1 |
读取或修改媒体的播放音量 |
|
muted |
true/false |
读取或修改媒体的静音状态 |
常用的方法和事件：
|
方法/事件 |
功能 |
|
play() |
播放媒体，paused属性的值自动修改为false |
|
pause() |
暂停播放，paused属性的值自动修改为true |
|
load() |
重新载入媒体进行播放 |
|
play事件 |
执行play()方法时触发 |
|
pause事件 |
执行pause()方法时触发 |
|
error事件 |
获取媒体数据错误时触发 |
|
timeupdate事件 |
当前播放位置发生改变时触发 |
|
durationchange事件 |
播放时长被改变 |
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="text-align:center">
<button οnclick="playPause()">播放/暂停</button>
<button οnclick="makeBig()">放大</button>
<button οnclick="makeSmall()">缩小</button>
<button οnclick="makeNormal()">普通</button>
<br>
<video id="video1" width="1200">
<source src="Video/pingpang.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if(myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 1800;
}
function makeSmall() {
myVideo.width = 600;
}
function makeNormal() {
myVideo.width = 1200;
}
</script>
</body>
</html>运行结果展示：
