AE圣诞树-HTML实现

一、前言

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

附上百度网盘源码:

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

二、创意名

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

三、效果展示

四、实现步骤

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

五、编码实现

AE-圣诞树html,body {margin: 0;width: 100%;height: 100%;}#main {position: fixed;top: 0;left: 0;}#video1 {width: 100%;height: 100%;}.hidden {display: none;}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();});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);