23(音视频)video | 七色的天空

<!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>
上述运行结果：
23(音视频)video-LMLPHP