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

Question

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

• image.jpeg
• image2.jpeg
• videoclip.mp4
• image3.jpeg
• someothervide.mp4

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

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

Answer 1

实际上这很容易解决.查找JavaScript注释中的所有解释.将所有这些全部包裹起来就像$(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="$" alt="">';
var srcVideo = '<video autoplay><source src="$" type="video/mp4"></source></video>';
// current position
var current = -1;
// regex for getting file extension (from http://stackoverflow.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();

演示

在jsfiddle.net上演示

关于演示的注释:由于提供的视频格式(视频/快速时间),演示仅在Safari中运行(也可能在IE9中).