Question

我正在尝试使用Reveal.js创建一些幻灯片，使用跨多个幻灯片的背景视频。使用data-background-video属性

在一张幻灯片上处理背景视频时没有问题

以下是来自reveal.js文档的工作片段：

  <section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-video-loop>
<h2>Video. Multiple sources can be defined using a comma separated list. Video will loop when the data-background-video-loop attribute is provided.</h2>
</section>

然而，即使我移动到下一张幻灯片，我想要的是视频是连续的。如果我将数据背景视频放在＆＃34;父母＆＃34; ，我可以看到视频的第一帧，但它只是冻结在那里

<section data-background-video="...">
    <section><h1>slide 1</h1></section>
    <section><h1>slide 2</h1></section>
    <section><h1>slide 3</h1></section>
</section>

我想将此作为演出的背景，我希望歌词覆盖在背景视频上。我会为歌曲的某个部分切换背景视频，但希望视频在歌词的线条出现时相同。

Answer 1

这是一种方法。在reveal.js里面修改updateBackground（）函数：从：

更改“if（currentBackground）”块

    if( currentBackground ) {

        // Start video playback
        var currentVideo = currentBackground.querySelector( 'video' );

        if( currentVideo ) {

            var startVideo = function() {
                currentVideo.currentTime = 0;
                currentVideo.play();
                currentVideo.removeEventListener( 'loadeddata', startVideo );
            };

            if( currentVideo.readyState > 1 ) {
                startVideo();
            }
            else {
                currentVideo.addEventListener( 'loadeddata', startVideo );
            }

        }
        //................
}

为：

if( currentBackground ) {

            // Start video playback
            var currentVideo = currentBackground.querySelector( 'video' );

            // This might be a nested node - check for parent video
            if(!currentVideo) currentVideo = currentBackground.parentNode.querySelector( 'video' ); 

            if( currentVideo ) {

                var startVideo = function() {
                    //currentVideo.currentTime = 0;
                    currentVideo.play();
                    currentVideo.removeEventListener( 'loadeddata', startVideo );
                };

                if( currentVideo.readyState > 1 ) {
                    startVideo();
                }
                else {
                    currentVideo.addEventListener( 'loadeddata', startVideo );
                }

            }
            //................
    }

我的建议是在父节点（）中搜索视频背景并恢复它。

Answer 2

只是通过Google找到了这个答案，但它没有用。因此，我开始寻找自己的解决方案，而且接缝非常简单。只需将以下代码添加到索引html底部的“ Reveal.initialize”命令下面（在脚本标签内）即可：

Reveal.addEventListener( 'slidechanged', function( event ) {
    window.setTimeout(function(){
        var stackedBackgrounds = $('body > div > div.backgrounds > div.stack');
        stackedBackgrounds.each(function(){
            var me = $(this);
            var video = me.find('video').get(0);
            console.log(video);
            if(video){
                if(me.hasClass('present')) {
                    console.log('play');
                    video.play();
                }
                else {
                    console.log('stop');
                    video.load();
                }
            }
        });
    }, 300);
} );

它有什么作用？

它注册“ slidechanged”事件，再等待300ms（因为事件触发得太早）。然后，它将找到所有堆叠的背景，并在可见的情况下开始播放视频，否则将通过重新加载来停止播放视频。还将简历设置为位置0。

全部。

PS 。：当然，您可以删除console.log行。

有没有办法在Reveal.js中为多张幻灯片使用一个背景视频？

2 个答案:

它有什么作用？