Question

我已经负责一个项目，我需要构建一个可以在销售人员的大显示器上显示的应用程序，它需要看起来像电视上的一些体育结果。

它基本上只有四个div，每个div都有一个视频背景和一些内容旋转。这在第一个循环中工作正常，但是一旦四个div重新开始，视频背景就不再有效了。视频＆＃34;来源＆＃34;标签被忽略，而海报图像显示。

我已经尝试了几个代码片段，但是没有一个代码片段在第二个代码片段中运行。

有人知道为什么会这样吗？我错过了一段代码片吗？

非常感谢任何提示！

项目网址：http://illufoxdesign.com/tests/salescast/

Answer 1

直观地说，我认为你的问题是你在第一次循环后没有播放视频。你有一个循环的脚本，但没有代码实际调用视频上的play()方法。

你有代码

var vid = document.getElementById("bgvid");
vid.volume = 0;
vid.play();

我建议你把它变成一个函数并在每个循环上调用它，然后重点播放视频。

如果您仍然无法解决问题，我会使用示例代码编辑此答案。

编辑：修改了代码。使用JSFiddle - https://jsfiddle.net/z3Lgc75p/5/以下JS代码是<script></script>标记中所需的唯一。

function fadeMyContent() {
    $(".wrapper:first").fadeIn(1000, function () {
        var vid = $(this).children("#bgvid");
        vid.get(0).play();
    }).delay(5000).fadeOut(1000,

    function () {
        $(this).appendTo($(this).parent());
        fadeMyContent();
    });
}
fadeMyContent();

HTML5视频背景转换仅适用于第一个循环

1 个答案: