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 onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="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>

运行结果展示：

H5的video元素实现的Demo

猜你喜欢