带有视频元素的基于 Web 的全屏幻灯片

Posted 2023-03-13

【中文标题】带有视频元素的基于 Web 的全屏幻灯片

【英文标题】：Web based fullscreen slideshow with video elements

【发布时间】：2012-11-28 06:28:47

【问题描述】：

我想开发基于 html 5 的幻灯片，其中包含全屏图像和视频。当几分钟没有用户活动时，这将是我们的一个信息亭上的某种屏幕保护程序。我们已经在全屏上实现了基于图像的幻灯片，所以这没有问题，但现在我们还想添加视频自动播放功能，例如让我们说这是屏幕保护程序内容的顺序

image.jpeg image2.jpeg 视频剪辑.mp4 image3.jpeg someothervide.mp4

在 jquery 脚本运行后，我们希望连续运行这些文件并显示几秒钟的图像或自动启动视频并在播放视频完成后移至下一张幻灯片

有人可以建议如何做到这一点，如果有任何已经实现的 jQuery 插件，你可以提供链接吗？

【问题讨论】：

有什么建议吗？

您能给我们看一个您的代码示例吗？

***.com/questions/2733689/… 可能重复？

我现在正在使用 Supersized jquery 插件，这就是我们目前所拥有的。 Bardo 你提供的链接有点不同，因为我在谈论 HTML5 视频标签

您在寻找这样的东西吗？ FIDDLE

【参考方案1】：

其实这很容易解决。在 javascript 的 cmets 中找到所有解释。将所有内容封装在 $(document).ready(function () ); 之类的闭包中，您就可以开始了。

HTML

<div id="canvas" class="canvas"></div>

CSS

div.canvas 
    display:           table-cell;
    width:             1280px;
    height:            800px;
    background:        black;
    vertical-align:    middle;


div.canvas > video 
    display:           block;
    margin:            auto;


div.canvas > img 
    display:           block;
    margin:            auto;

JavaScript - 变量

// array containing links to the content
var content = ['movie_1.m4v', 'movie_2.m4v', 'image_1.jpg', 'image_2.jpg'];
// element where anything will be played
var canvas = $('#canvas');
// duration an image is shown in ms (milliseconds)
var durationImage = 1000;
// basic source for image and video tag
var srcImage = '<img src="$" >';
var srcVideo = '<video autoplay><source src="$" type="video/mp4"></source></video>';
// current position
var current = -1;
// regex for getting file extension (from http://***.com/questions/680929/how-to-extract-extension-from-filename-string-in-javascript)
var regex = /(?:\.([^.]+))?$/;

JavaScript - 函数

// method to play the next content element
function playNext() 
    // increase current element and set it to 0 if end is reached
    ++current;  
    if (content.length == current) 
        current = 0;
    
    // get file and its extension and check whether it's valid
    var source      = null;
    var file        = content[current];
    var extension   = regex.exec(file)[1];
    if ('jpg' == extension) 
        source      = srcImage;
    
    if ('m4v' == extension) 
        source      = srcVideo;
    
    // if source seems valid
    if (null !== source) 
        // replace placeholder with the content and insert content into canvas
        source  = source.replace('$', file);
        canvas.html(source);
        // if content is an image play next after set duration
        if ('jpg' == extension) 
            setTimeout(function()  playNext(); , durationImage);              
        
        // if content is a video, bind 'onend' event handler to it, to play next
        if ('m4v' == extension) 
            canvas.find('video').bind("ended", function() 
                playNext();
            );
        
    

JavaScript - 最后：初始函数调用

// show first (remember current = -1 from above :) )
playNext();

演示

Demo on jsfiddle.net

关于演示的说明：由于提供的视频格式 (video/quicktime)，该演示仅在 Safari 中运行（也可能在 IE9 中运行）。

【讨论】：

这是编写此类解决方案脚本的好方法，因为它避免了生成额外的 DOM 元素

要在 chrome 66 更新后使 html 5 标签上的自动播放工作，您需要将 muted 属性添加到视频标签。见这里：link

【参考方案2】：

首先，我将首先给你这个LINK。在这里您可以找到很多有关视频事件的有用信息（例如：已结束、已加载、正在播放等）。

另外，这里是小提琴/演示的LINK（在 Chrome 上测试）。

这是html结构：

<section class="slideshow">
    <ul>
         <img src="" class="loader" />
         <div class="pause"></div>
         <li>img/video</li>
         <li>img/video</li>
         <li>img/video</li>
         <li>img/video</li>
         <li>img/video</li>
    </ul>
</section>

我们有一个简单的<section>，其中包含我们所有的图片和视频。我还添加了一个GIF 加载器来显示我们在开始加载一些东西（不需要看到图片加载缓慢），以及一个Pause 按钮。

用于设置所有元素及其大小的 Css：

.slideshow 
    width: 700px;
    height: 300px;
    background: #efefef;
    position: relative;
    background: white;
    box-shadow: 0px 0px 5px black;
    margin: 20px auto;


.slideshow ul 
    width: 100%;
    height: 100%;
    position: relative;
    list-style: none;
    overflow: hidden;
    display: none;


.slideshow ul li 
    position: absolute;
    left: 100%;


.slideshow ul li:first-child 
    left: 0%;


video 
    background: #434343;


.loader 
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -25px;
    margin-top: -25px;


.pause 
    display: none;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    border-radius: 50%;
    background: rgba(0,0,0,.6);
    z-index: 100;
    line-height: 50px;
    text-align: center;
    font-size: 1.0em;
    font-weight: bold;
    color: white;
    cursor: pointer;
​

最后是 Javascript/jQuery 部分：

// Some variables
var timer;
var sWidth = 400, sHeight = 200, border = 10;
var slideshowSet = false;
var video;
var videoSet = false;
var slidePause = false;
var $el;
var $currentEl = $('.slideshow').find('li').eq(0);

// On document ready
$(function() 
    // Set slideshow dimensions + border
    setSlideDimensions(sWidth, sHeight, border);

    // Show pause button
    $('.slideshow').hover(
        function()
            if(slideshowSet) 
                $('.pause').stop().fadeIn(200);
            
        ,
        function() 
            if(slideshowSet) 
                $('.pause').fadeOut(200);
            
        
    );

    // Pause button
    $('.pause').click(function() 
         if($(this).text() == '| |') 
            // Pause slideshow
            slidePause = true;
            $(this).text('►');
            clearTimeout(timer);
            if($currentEl.find('video').size() == 1)
                video.pause();
            
         else 
            // Play slideshow
            $(this).text('| |');
            if($currentEl.find('video').size() == 1)
                video.play();
             else 
                timer = setTimeout(slide, 2000);
            
        
    );
);

// Window ready (all images loaded, but not videos!!)
$(window).ready(function() 
    // Hide loader GIF
    $('.loader').fadeOut(200);

    // Show slideshow
    $('.slideshow ul').fadeIn(200);

    // Start slideshow
    timer = setTimeout(slide, 2000);
    slideshowSet = true;
);

// Function to slide
function slide() 
    videoSet = false;
    var $el = $('.slideshow').find('li');
    $el.eq(1).add($el.eq(0)).animate('left': '-='+sWidth, queue: false, duration: 300, complete: function() 
        $el.eq(0).animate('left': '100%', 0);
        if($(this).index() == 1)
            $('.slideshow ul').append($el.eq(0));
            $currentEl = $el.eq(1);

            // We chek if it's a video
            if($(this).find('video').size() == 1) 
                //If yes we set the variable
                video = $(this).find('video')[0];
                videoSets();

                // If video can play
                if (video.canPlayType) 
                     // Play video
                     video.play();
                 else 
                     // Error message
                     alert('No html5');
                
             else 
                // If not a video we set timeout to next slide
                timer = setTimeout(slide, 2000);
            
        
    );
 

 // Function to set all video events
 function videoSets()
     if(!videoSet) 
         videoSet = true;
        // Video ended
        video.addEventListener("ended", function () 
            timer = setTimeout(slide, 2000);
        );

        // Video Playing
        video.addEventListener("playing", function () 
            clearTimeout(timer);
            if(slidePause) 
                $('.pause').text('| |');
                video.play();
                slidePause = false;
            
        );
    


// Function to set slideshow dimensions
function setSlideDimensions(w, h, b) 
    $('.slideshow').css(width: w, 'height': h, 'padding': b);
    $('.slideshow ul li img, .slideshow ul li video').css(width: w, 'height': h);

​

视频事件还有更多工作要做。如果可能的话，我会预加载所有视频（不要太大），然后开始播放幻灯片，以确保没有“空白时刻”。如果您有太多视频，您可以开始加载第一个 (2/3)，然后开始播放幻灯片。通过将属性 preload 放入您的 <video> 标记，它们将在文档加载后开始并继续加载（通常）。

您还可以在<video> 标签中插入多个不同格式的视频，以便扩展其跨浏览器的兼容性。

如果您有任何其他问题，请随时提出。它可能并不完美，因为我第一次这样做！ ;)

【讨论】：

我认为你的脚本比我要求的有点复杂，但它确实是一个很好的答案，你为 VIDEO 标签提供的链接对我很有帮助。