23(音视频)video

最新推荐文章于 2024-08-24 16:43:50 发布

七色的天空

最新推荐文章于 2024-08-24 16:43:50 发布

阅读量460

点赞数 12

分类专栏： 08_新H5 文章标签：音视频

本文链接：https://blog.csdn.net/q506174602/article/details/135604932

版权

08_新H5 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML和JavaScript在网页上创建视频播放功能，包括自动播放、暂停、快进快退、大小调整以及全屏模式，展示了对DOM元素和浏览器API的运用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>视频</title>
</head>
<body>
	<video src="media/video.mp4" autoplay poster="media/01.jpg" controls></video>

	<button class="play">播放</button>
	<button class="pause">暂停</button>
	<button class="quick-play">快速播放</button>
	<button class="quickly">快进</button>
	<button class="back">快退</button>
	<button class="reload">重载</button>
	<button class="big">大</button>
	<button class="middle">中</button>
	<button class="small">小</button>
	<button class="full-screen">全屏</button>


	<script type="text/javascript" src="../jquery-3.2.1.js"></script>
	<script type="text/javascript">
		$('.play').click(() => {
			$('video').get(0).play();
		});

		$('.pause').click(() => {
			$('video').get(0).pause();
		});

		$('.quick-play').click(() => {
			console.dir($('video').get(0));
			$('video').get(0).playbackRate = 2;
		});

		$('.quickly').click(() => {
			$('video').get(0).currentTime += 3;
		});

		$('.back').click(() => {
			$('video').get(0).currentTime += 3;
		});

		$('.reload').click(() => {
			$('video').get(0).load();
		});

		$('.big').click(() => {
			$('video').get(0).width = 2000;
		});

		$('.middle').click(() => {
			$('video').get(0).width = 800;
		});
		$('.small').click(() => {
			$('video').get(0).width = 400;
		});

		$('.full-screen').click(() => {
			$('video').get(0).webkitRequestFullScreen();
		});
	</script>
</body>
</html>

上述运行结果：