标签: slideshow

ffmpeg:幻灯片中图像的长宽比

我有一堆 PNG 图像文件。我正在尝试使用 ffmpeg 制作幻灯片。图片尺寸为3000*4000。这些图像的长宽比并不完全相同。

有些是这样的:

在此输入图像描述

有些是这样的:

在此输入图像描述

我使用了命令:

ffmpeg -loop 1 -framerate 1/10 -i img%3d.png -i audio.wav -vf scale=w=3840:h=-1 -vcodec libx264 -crf 14 -r 60 -pix_fmt yuv420p -shortest output.mp4
Run Code Online (Sandbox Code Playgroud)

它返回给我这个:

   ffmpeg version 3.3.2 Copyright (c) 2000-2017 the FFmpeg developers
  built with gcc 6.3.0 (Debian 6.3.0-18) 20170516
  configuration: --disable-decoder=amrnb --disable-decoder=libopenjpeg --disable-mips32r2 --disable-mips32r6 --disable-mips64r6 --disable-mipsdsp --disable-mipsdspr2 --disable-mipsfpu --disable-msa --disable-libopencv --disable-podpages --disable-stripping --enable-avfilter --enable-avresample --enable-gcrypt --enable-gnutls --enable-gpl --enable-libass --enable-libbluray --enable-libbs2b --enable-libcaca --enable-libcdio --enable-libfdk-aac --enable-libfontconfig --enable-libfreetype --enable-libfribidi --enable-libgme --enable-libgsm --enable-libilbc --enable-libkvazaar --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrwb …
Run Code Online (Sandbox Code Playgroud)

linux ffmpeg aspect-ratio slideshow

5
推荐指数
1
解决办法
2848
查看次数

SwiperSlide onTouchStart/onClick => 触发slideNext()

我想包括这张幻灯片: https: //swiperjs.com/react/

由于我发现拖动下一张幻灯片不太舒服,因此我想onClick向完整滑块添加一个事件,以便下一张幻灯片出现。

如何slideNext()在 React 中触发 a ?我在阅读文档时遇到问题/我不理解它 - 并且文档似乎没有告诉如何在反应中执行此操作。

在 jquery 中,它会是这样的:

$('section.slideshow').on( 'click', function() {
    swiper.slideNext();
});
Run Code Online (Sandbox Code Playgroud)

这是我的反应代码:

import React from 'react'
import SwiperCore, { Navigation, Pagination, A11y } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/react'

import 'swiper/swiper.scss'
import 'swiper/components/navigation/navigation.scss'
import 'swiper/components/pagination/pagination.scss'

SwiperCore.use([Navigation, Pagination, A11y])


function Page(){
  return (
    <div>

<Swiper 
  onClick={() => console.log('click')}
  onTouchStart={() => slideNext()     }
>

  <SwiperSlide>slide 1</SwiperSlide>
  <SwiperSlide>slide 2</SwiperSlide>

</Swiper>

</div>

  );
}

export default Page;
Run Code Online (Sandbox Code Playgroud)

slideshow reactjs swiper.js

5
推荐指数
2
解决办法
2万
查看次数

如何在jQuery Galleria插件中自动切换showinfo?

我似乎无法在任何地方找到这个记录.基本上我只想在整个幻灯片中自动显示标题...

提前致谢...

jquery jquery-plugins galleria slideshow

4
推荐指数
1
解决办法
5584
查看次数

Android ViewPager - 添加带淡入/淡出动画的幻灯片,以在视图之间切换

我用它ViewPager来实现我自己的图库.观点由ImageViews 组成.用户可以使用手势(如在ViewPager)中正常地在图像之间导航.

我要添加的是幻灯片功能.当用户从菜单中选择"幻灯片放映"选项时,我希望能够开始ViewPager项目的动画 - 理想情况下,动画将是图像/幻灯片之间的淡入/淡出效果.

有可能实现这个ViewPager吗?

java android slideshow touch android-viewpager

4
推荐指数
1
解决办法
7223
查看次数

在HTML5幻灯片上添加注释/绘图

我在OSX上使用HTML5幻灯片库reveal.js来教授编程.

对我来说仍然缺少的是一种通过简单的绘图突出显示幻灯片上的东西的方法(例如环绕某些东西).

有没有办法做到这一点(javascript或Mac应用程序)?

PS:我尝试了一些普通的应用程序,这些应用程序在演示期间非常不方便使用.

谢谢!

编辑:可能是使用叠加画布的东西?

html5 slideshow

4
推荐指数
1
解决办法
1054
查看次数

Bootstrap Carousel Transitions和Prev/Next按钮不起作用

我正在尝试实现twitter bootstrap carousel,它不能正常工作 - 它不会自动切换图像,而且上一个/下一个按钮不起作用.

我已经尝试切换到jquery 1.7.1按照建议在Bootstrap Carousel Not Automatically SlidingBootstrap Carousel不工作,但似乎没有任何帮助.

任何想法,将不胜感激.

<!DOCTYPE html>
<html>
    <head>
        <title>Slideshow Test</title>
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
        <script src="js/bootstrap.js"></script>
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/bootstrap-transition.js"></script>
    </head>
    <body>
        <div id="myCarousel" class="carousel slide" style="width:450px">
            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="item active"><img src="img/IMG_2.jpg"></div>                
                <div class="item"><img src="img/IMG_3.jpg"></div>
                <div class="item"><img src="img/IMG_1.jpg"></div>
                <!-- Carousel nav -->
                <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
            </div>
        </div>    
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

您可以在www.abbymilberg.com/bootstrap上查看它及其链接的文件.

javascript jquery slideshow carousel twitter-bootstrap

4
推荐指数
2
解决办法
7万
查看次数

使用paintComponent进行Java幻灯片图像延迟

我正在整理一个幻灯片程序,用于衡量用户在每张幻灯片上花费的时间.幻灯片演示了几个不同的魔术技巧.每个技巧都会显示两次.在重复之间显示临时图像.在每个技巧之间显示过渡图像.

在第一次重复技巧时,在显示下一个图像之前,点击后,JPanel颜色在屏幕上闪烁.在第二次重复相同的技巧期间不会发生这种情况.图像可能需要很长时间才能加载.

是否有一种简单的方法来预加载图像,以便第一次没有延迟?

NOTE: Original code deleted.
Run Code Online (Sandbox Code Playgroud)

编辑2013年1月10日:此代码现在适用于较慢的计算机.trashgod的第二个附录帮助最多.mouseClick控件结构定期要求SwingWorker类加载40个或更少的当前技巧,同时还将使用过的图像设置为null.我已经将我的代码简化为两个Image []并添加了一个main方法,因此它是独立的.仍然需要运行图像.现在这是非常简单的代码,如果你想用大量图片制作幻灯片,我认为这将是一个很好的起点.

注意:我想我在使用多个Image []时想出了如何正确实现SwingWorker.trashgod和kleopatra这个实现符合你的建议吗?我最终没有使用发布和进程,因为我无法弄清楚如何使用索引数组正常工作,但因为StringWorker没有加载数组中的所有图像(只有40)和代码调用StringWorker每20个图像,应该有一个相当不错的缓冲区.

编辑1/10/2013通过在Mouse类上扩展MouseAdapter来改变MouseListener.还修复了我的paintComponent方法,以包含对super.paintComponent(g)的调用.向我的SwingWorker类ImageWorker添加了发布/处理方法.添加了一个包装类ArrayWrapper,允许传递imageArray [i]及其相应的索引int i,并使用publish进行处理.

package slideshow3;

import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.MouseEvent;
import java.awt.event.MouseAdapter;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import java.util.List;

public class SlideShow3 extends JFrame
{
    //screenImage will be replaced with each new slide
    private Image screenImage;
    private int width;
    private int height;

    //Create panel for displaying images using paintComponent()
    private SlideShow3.PaintPanel mainImagePanel;

    //Used for keybinding
    private Action escapeAction;

    //Image array variables for each trick
    private …
Run Code Online (Sandbox Code Playgroud)

java image slideshow swingworker paintcomponent

4
推荐指数
1
解决办法
3010
查看次数

将jQuery包含到Wordpress模板中

我有一个定制的幻灯片,我用jQuery开发.它完美的作品我的本地机器上,但是当我尝试它过渡到WordPress的服务器,它只是将无法正常工作...

这是我链接我的JavaScript文件的方式:

<?php wp_enqueue_script("jquery"); ?>       
        <?php wp_head(); ?>
        <script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/jQuery.js"></script>
        <script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/JQueryUI.js"></script>
        <script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/slider.js"></script>
        <script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/gallery.js"></script>
Run Code Online (Sandbox Code Playgroud)

而且我还检查了javascript是否有效(像警报一样).但是与jQuery相关的一切都没有.

迫切需要帮助.任何相关教程的提示或链接都可以.谢谢你提前!

wordpress jquery slideshow web

4
推荐指数
1
解决办法
9204
查看次数

jQuery SlidesJS - 单击导航后无法重新启动动画

我正在使用新的slideJS V3.0但是我似乎无法通过点击导航暂停幻灯片动画.我看到有人说他们让它与分页一起工作,所以我尝试使用它,但没有用.任何帮助是极大的赞赏!

这是我正在使用的代码(目前试图让它甚至与分页一起工作)

<script>

$(function() {

  $('#slides').slidesjs({

    width: 905,
    height: 310,
     navigation: false,
  play: {
    auto: true,
    pauseOnHover: true,
    effect: 'fade',
    restartDelay: 1500
  },
  pagination: {
    effect: 'fade',
    play: {          
      restartDelay: 1500
    }
  },
  effect: {
    fade: {
       speed: 1500
    },       
    crossfade: true
  }

  });
});

</script>
Run Code Online (Sandbox Code Playgroud)

jquery slideshow

4
推荐指数
1
解决办法
2680
查看次数

暂停css动画

我在html和css中做了一个幻灯片放映,当我的鼠标移过它时我想暂停幻灯片放映.我尝试这样做-webkit-animation-play-state: paused;,但这只是暂停1张图片,因此搞砸了幻灯片.有没有办法在悬停时暂停所有图像?

http://jsfiddle.net/m3q8pe56/

html css animation slideshow

4
推荐指数
1
解决办法
615
查看次数