<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>视频案例</title>
</head>
<body>
<video width="" height="" autoplay controls loop="loop" poster="img/lbt3_img1.jpg">
<source src="video/iceage4.mp4" type="video/mp4"></source>
<source src="video/street.wmv" type="video/ogg"></source>
<source src="video/iceage4.webm" type="video/webm"></source>
当前浏览器不支持 video直接播放,点击这里下载视频: <a href="myvideo.webm">下载视频</a>
</video>
<button id="play">播放</button>
<button id="ponse">暂停/继续</button>
<button id="meter">静音</button>
<button id="load">重播</button>
<script type="text/javascript">
var play = document.getElementById("play");
var ponse = document.getElementById("ponse");
var meter = document.getElementById("meter");
var load = document.getElementById("load");
var video1 = document.getElementsByTagName("video")[0];
play.onclick = function () {
video1.play();
}
ponse.onclick = function () {
if (video1.paused) {
video1.play();
} else{
video1.pause();
}
}
load.onclick = function () {
video1.load();
video1.autoplay=true;
}
meter.onclick = function () {
if (video1.muted) {
video1.muted=false;
}else{
video1.muted=true;
}
}
</script>
</body>
</html>
js+video实现视频播放
最新推荐文章于 2024-08-08 08:27:10 发布