CSS 幻灯片视频库

Question

有谁知道如何制作幻灯片视频画廊？我一直在寻找这个，但我能找到的只是幻灯片图片库。如果有人知道这方面有什么可以参考的，可以告诉我吗？

这就是我想要在 CSS 中制作视频库的方式

Answer 1

您可以使用CSS的快速滚动属性来制作这种效果。

这里有一些有用的学习链接。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap

https://css-tricks.com/practical-css-scroll-snapping/

或者您可以使用：scroll-direction: horizontal;

https://css-tricks.com/pure-css-horizontal-scrolling/

或者通过一些技巧和动画你可以像这样实现它

https://codepen.io/Schepp/pen/WNbQByE

最后一部分是使用视频非常简单，只需将图像或文本替换为视频标签或 youtube 视频 iframe。

就是这样...

Answer 2

如果您能够制作图片库，那么您只需将代码 <img src="file.png"/> 中的图片标签更改为视频标签即可。

例如：
<video width="300" height="250" controls>
<source src="movie.mp4" type="video/mp4">
</video>