js+video实现视频播放

最新推荐文章于 2024-08-08 08:27:10 发布

清砾

最新推荐文章于 2024-08-08 08:27:10 发布

阅读量3.4k

点赞数 1

分类专栏：技术小妙招文章标签： js

本文链接：https://blog.csdn.net/m0_46690660/article/details/108476597

版权

技术小妙招专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

清砾

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js+video实现视频播放

<!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="
复制链接

扫一扫

专栏目录