用于全屏循环GIF和MP4的JavaScript幻灯片演示

2021-03-03 12:17:31

最近我认为转换很多gifs我必须要拯救一些记忆棒的空间很好。 我发现的问题是,当您查看它们时,Mac上的QuickLook不会循环MP4,这很烦人。 所以我划伤了自己的痒,写了一个快速的普通的香草术幻灯片幻灯片,你可以在github上看到它。 在没有裁剪的情况下在最大可能的尺寸下显示文件夹中的任何视频或图像 鼠标或键盘导航(向左和向后箭头和向前,空间切换自动前进) 存储幻灯片展示的当前位置。 下次加载其上次停止的文档时,它开始的文档。 您可以通过将其授予一个容器来创建所有元素来使用幻灯片,定义幻灯片按对象的不同设置: 容器:应添加幻灯片显示的HTML元素的DOM引用

文件夹:包含这些文件夹的文件夹–这应该是幻灯片放映所在文件夹的子文件夹。

速度:前进到下一个媒体项目的时间(以毫秒为单位)(例如1000秒)

< div id =" slideshow-container" > < / div> <脚本> let slideshow = {container:'#slideshow-container&#39 ;,媒体:[' ball.mp4',' dinowalk.mp4',' dirty.mp4& #39;,goldiejump.mp4',step.mp4',tippy.mp4',wag.mp4' ],文件夹:' imgs /&#39 ;,自动播放:'是' }< / script> < script src =" slideshow.js" > < /脚本>

< div id =" slideshow-container">< / div> < script> 让幻灯片= { 容器:' slideshow-容器&#39 ;, 媒体: [ ' ball.mp4',dinowalk.mp4',dirty.mp4&#39, ' goldiejump.mp4',step.mp4',tippy.mp4',wag.mp4' ], 文件夹:' imgs /&#39 ;, 自动播放:'是' } < / script> < script src =" slideshow.js">< / script>

目前,我正在运行本地服务器和index.php脚本的硬盘驱动器上使用此文件。如果您使用的是Mac,则系统随附PHP。转到终端,导航到幻灯片放映的文件夹并运行:

index.php脚本列出了该脚本所在目录中的所有当前文件夹,并提供了所有这些文件夹的列表。单击名称的链接将开始使用当前文件夹进行幻灯片放映。随时检查脚本,但那里没有太多魔术。

index.php是GitHub存储库的一部分,因此克隆或下载zip将使您入门。