Mux Blog - Video technology and more
·
有史以来最烦人的视频播放器
💡
原文英文，约3500词，阅读约需13分钟。
📝
内容提要
1995年，作者在游戏厅体验投币机制的乐趣，决定利用Media Chrome制作一个独特的视频播放器。该播放器通过投币控制播放时间，设计了真实的投币箱和物理碰撞效果，增加了互动性和趣味性。尽管不实用，制作过程带来了乐趣，鼓励他人参与创作。
🎯
关键要点
- 1995年，作者在游戏厅体验投币机制，决定制作一个独特的视频播放器。
- 该播放器通过投币控制播放时间，设计了真实的投币箱和物理碰撞效果。
- 制作过程虽然不实用，但带来了乐趣，鼓励他人参与创作。
- 现代视频播放器通常设计单一，作者希望打破这种同质化。
- 项目目标是通过投币机制控制视频播放，每个硬币可购买三秒播放时间。
- 使用Three.js创建3D场景，构建了一个具有真实物理效果的投币箱。
- 引入react-three-rapier物理库以处理重力和碰撞，确保硬币与投币箱的互动。
- 硬币模型与物理碰撞器结合，使其在场景中真实反应，增加互动性。
- 实现了拖放功能，确保一次只能拖动一个硬币，增加挑战性。
- 成功投币后，播放器会闪烁并发出声音，未成功则重置视频并发出“游戏结束”的声音。
- 计时器始终可见，增加紧迫感，倒计时结束时视频会停止播放。
- 未及时投币会导致视频进度丢失，重置为初始状态。
- 尽管播放器不实用，但制作过程充满乐趣，作者享受其中。
- 鼓励他人参与创作，提交自己的作品，有机会赢得奖品。
❓
延伸问答
这个视频播放器是如何工作的？
这个视频播放器通过投币机制控制播放时间，每个硬币可以购买三秒的播放时间。
制作这个视频播放器的灵感来源是什么？
灵感来源于1995年在游戏厅体验的投币机制，尽管令人沮丧，但也非常吸引人。
这个播放器有什么独特的设计特点？
播放器设计了真实的投币箱和物理碰撞效果，增加了互动性和趣味性。
使用了哪些技术来实现这个视频播放器？
使用了Three.js创建3D场景，并引入react-three-rapier物理库处理重力和碰撞。
这个视频播放器的制作过程有什么乐趣？
尽管不实用，但制作过程充满乐趣，作者享受其中，并鼓励他人参与创作。
如果不及时投币会发生什么？
未及时投币会导致视频进度丢失，视频会重置为初始状态。
➡️
