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>
本文转载自: https://blog.csdn.net/qq_45278500/article/details/128411831
版权归原作者 爪哇xiao白 所有， 如有侵权，请联系我们删除。
版权归原作者 爪哇xiao白 所有， 如有侵权，请联系我们删除。