feat: update airpods pro demo

dev-zuo · Mar 22, 2023 · 901b957 · 901b957
1 parent ce6cd45
commit 901b957
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 74 deletions.
diff --git a/src/5-airpods-pro-play-video-on-scroll/demo-1-devstories/devstories.webm b/src/5-airpods-pro-play-video-on-scroll/demo-1-devstories/devstories.webm
diff --git a/src/5-airpods-pro-play-video-on-scroll/demo-1-devstories/index.html b/src/5-airpods-pro-play-video-on-scroll/demo-1-devstories/index.html
@@ -5,44 +5,28 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Scrolling controls for HTML5 video</title>
- <style>
- #set-height {
- display: block;
- height: 10500px;
- }
- #v0 {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- }
- p font-family helvetica {
- font-size: 24px;
- }
- </style>
  </head>
- <body>
- <!-- Scrolling controls for HTML5 video https://codepen.io/ksiddiqi/pen/YzRmBb -->
- <div id="set-height"></div>
- <p id="time"></p>
+ <!-- Scrolling controls for HTML5 video https://codepen.io/ksiddiqi/pen/YzRmBb -->
+ <!-- src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" -->
+ <body style="height: 10500px;">
  <video
- id="v0"
+ id="videoId"
  muted
- src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm"
+ src="./devstories.webm"
+ style="position: fixed;top: 0;left: 0;width: 100%;"
  ></video>
  <script>
- // select video element
- var vid = document.getElementById("v0");
+ const videoEl = document.getElementById("videoId");
  // pause video on load
- vid.pause();
+ videoEl.pause();
  // pause video on document scroll (stops autoplay once scroll started)
  window.onscroll = function () {
- vid.pause();
+ videoEl.pause();
  };
  // refresh video frames on interval for smoother playback
  setInterval(function () {
- vid.currentTime = window.pageYOffset / 400;
- console.log(vid.currentTime, window.pageYOffset)
+ videoEl.currentTime = window.pageYOffset / 400;
+ // console.log(videoEl.currentTime, window.pageYOffset)
  }, 40);
  </script>
  </body>

diff --git a/src/5-airpods-pro-play-video-on-scroll/demo-2-macpro/index.html b/src/5-airpods-pro-play-video-on-scroll/demo-2-macpro/index.html
@@ -5,48 +5,26 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Play Video on Scroll</title>
- <style>
- #set-height {
- display: block;
- height: 10000px;
- }
- #vid {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- }
- p font-family helvetica {
- font-size: 24px;
- }
- </style>
  </head>
- <body>
- <!-- Play Video on Scroll! https://codepen.io/marduklien/pen/MdvdEG -->
- <div id="set-height"></div>
- <p id="time"></p>
+ <!-- Play Video on Scroll! https://codepen.io/marduklien/pen/MdvdEG -->
+ <body style="height: 10000px">
  <video
- id="vid"
+ id="videId"
  src="https://www.apple.com/media/us/mac-pro/2013/16C1b6b5-1d91-4fef-891e-ff2fc1c1bb58/videos/macpro_main_desktop.mp4"
+ style="position: fixed; top: 0; left: 0; width: 100%"
  muted
  ></video>
  <script>
+ let playbackConst = 200;
+ let videoEl = document.getElementById("videId");
  // Use requestAnimationFrame for smooth playback
- var frameNumber = 0, // start video at frame 0
- // lower numbers = faster playback
- playbackConst = 200,
- // get page height from video duration
- setHeight = document.getElementById("set-height"),
- // select video element
- vid = document.getElementById("vid");
-
  function scrollPlay() {
  // 设置当前视频播放位置 = 页面滚动距离 / playbackConst 常量 // 多少 s
  // 常量值越小，单位滚动距离，播放的视频时长越长。有可能滚动一小段视频就结束了。
  // 因此，这个 playbackConst 值需要可能视频时长、页面滚动高度来设置合适的值
  var frameNumber = window.pageYOffset / playbackConst;
- vid.currentTime = frameNumber;
- console.log(vid.currentTime);
+ videoEl.currentTime = frameNumber;
+ // console.log(videoEl.currentTime);
  window.requestAnimationFrame(scrollPlay);
  }
  window.requestAnimationFrame(scrollPlay);

diff --git a/src/5-airpods-pro-play-video-on-scroll/demo-3-airpods/index.html b/src/5-airpods-pro-play-video-on-scroll/demo-3-airpods/index.html
@@ -1,20 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="height: 100vh;">
  <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Scroll to control video position</title>
  <style>
- html {
- height: 100vh;
- }
-
- body {
- height: 500vh;
- background: #000;
- }
-
  canvas {
  position: fixed;
  left: 50%;
@@ -25,19 +16,24 @@
  }
  </style>
  </head>
- <body>
+ <!-- Scroll to control video position https://greensock.com/forums/topic/29900-scroll-to-control-video-position/ -->
+ <body style="height: 500vh;background: #000;">
  <canvas id="hero-lightpass" />
- <!-- Scroll to control video position https://greensock.com/forums/topic/29900-scroll-to-control-video-position/ -->
  <script>
  const html = document.documentElement;
  const canvas = document.getElementById("hero-lightpass");
  const context = canvas.getContext("2d");
-
  const frameCount = 148;
- const currentFrame = (index) =>
- `https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${index
+ const currentFrame = (index) => {
+ console.log(index, index.toString(), index.toString().padStart(4, "0"));
+ // 1 '1' '0001'
+ // 13 '13' '0013'
+ // 148 '148' '0148'
+ return `https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${index
  .toString()
  .padStart(4, "0")}.jpg`;
+ }
+
 
  const preloadImages = () => {
  for (let i = 1; i < frameCount; i++) {
@@ -61,8 +57,9 @@
 
  window.addEventListener("scroll", () => {
  const scrollTop = html.scrollTop;
- const maxScrollTop = html.scrollHeight - window.innerHeight;
- const scrollFraction = scrollTop / maxScrollTop;
+ const maxScrollTop = html.scrollHeight - window.innerHeight; // 总共可以滚动的距离
+ const scrollFraction = scrollTop / maxScrollTop; // 当前滚动距离 / 总滚动距离
+ // 当前图片帧 index = 滚动比例 * 总图片帧数
  const frameIndex = Math.min(
  frameCount - 1,
  Math.ceil(scrollFraction * frameCount)

diff --git a/src/5-airpods-pro-play-video-on-scroll/ipad-mini/index-1.html b/src/5-airpods-pro-play-video-on-scroll/ipad-mini/index-1.html
@@ -31,6 +31,7 @@
  <video
  id="v0"
  muted
+ style="max-width: 100%;"
  src="./assets/ipad-mini-keyint-1.mp4"
  ></video>
  <script>