【AE圣诞树HTML】

爪哇xiao白

已于 2022-12-22 19:06:47 修改

阅读量1.6k

点赞数 1

分类专栏： HTML 文章标签：前端 html javascript

于 2022-12-22 19:06:12 首次发布

本文链接：https://blog.csdn.net/qq_45278500/article/details/128411831

版权

HTML 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

AE圣诞树-HTML实现

一、前言

又是一年圣诞节，圣诞树源码安排上。

附上百度网盘源码：

链接：https://pan.baidu.com/s/1WO9WifvlSaD_9k5jMv-OKQ
提取码：afmt

二、创意名

加载自动播放背景音乐，并且可以控制圣诞树旋转速度。

三、效果展示

四、实现步骤

导入AE视频，引入背景音乐，控制视频播放速度。

五、编码实现

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>AE-圣诞树</title>
		<style>
			html,
			body {
				margin: 0;
				width: 100%;
				height: 100%;
			}

			#main {
				position: fixed;
				top: 0;
				left: 0;
			}

			#video1 {
				width: 100%;
				height: 100%;
			}

			.hidden {
				display: none;
			}
		</style>

	</head>

	<body id="app">
		<div id="main">
			<video id="video1" muted="muted" autoplay="autoplay" loop="loop" src="./video/chrismas.mp4">
			</video>
			<audio id="music1" autostart="true" loop="loop" preload="auto" controls hidden="true">
				<source src="./music/jinniandongtianpeizhewoba.mp3"></source>
			</audio>

		</div>


	</body>
	<script type="text/javascript">
		var video = document.getElementById("video1");
		video.playbackRate *= 0.8;
		video.play();
		$(function() {
			// var video = document.getElementById("video1");
			// video.src = "";
			// video.play();

			// var music = document.getElementById("music1");
			// music.src = "";
			// music.play();
		});
	</script>
	<script>
		var myAuto = document.getElementById('music1');
		var app = document.getElementById("app");
		// 监听事件
		app.addEventListener("mousemove", function() {
			console.log("played");
			myAuto.play();
		}, true);

		// 用定时器触发事件
		setInterval(function() {
			if ("createEvent" in document) {
				var evt = document.createEvent("HTMLEvents");
				evt.initEvent("mousemove", false, true);
				app.dispatchEvent(evt);
			} else{
				app.fireEvent("onmousemove");
			}
		}, 1000);
	</script>
</html>