javascript - 从 JavaScript 控制视频背景

Question

我正在使用 Bootstrap 模板。我在根目录中组织了我的文件，在子文件夹中组织了一些 php 文件。

在我的页面上 here视频正在运行。这个文件在根目录下

在我的页面上 here视频不工作。此文件位于子文件夹中

问题 1:我不明白为什么视频在子文件夹中没有播放？

问题 2:我想控制在特定站点播放哪些视频。外汇:

site-1.php -> 视频 1

site-2.php -> 视频 2

site-3.php -> 视频 3

我一直在搜索javascript，有控制视频。但是在任何地方都看不到视频的任何链接？ JSFiddle

我以为视频的链接会在html中，但是这里没有显示哪个视频的链接。

<!-- banner start -->
            <!-- ================ -->
            <div class="banner video-background-banner pv-40 dark-translucent-bg hovered">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 text-center col-md-offset-2 pv-20">
                            <h2 class="title object-non-visible" data-animation-effect="fadeIn" data-effect-delay="100">About Us</h2>
                            <div class="separator object-non-visible mt-10" data-animation-effect="fadeIn" data-effect-delay="100"></div>
                            <p class="text-center object-non-visible" data-animation-effect="fadeIn" data-effect-delay="100">Lorem ipsum dolor sit amet</p>
                        </div>
                    </div>
                </div>

            </div>
            <!-- banner end -->

更新 template.js

//Video Background
        //-----------------------------------------------
        if($(".video-background").length>0) {
            if (Modernizr.touch) {
                $(".video-background").vide({
                    mp4: "videos/background-video.mp4",
                    webm: "videos/background-video.webm",
                    poster: "videos/video-fallback.jpg"
                }, {
                    volume: 1,
                    playbackRate: 1,
                    muted: true,
                    loop: true,
                    autoplay: true,
                    position: "50% 100%", // Similar to the CSS `background-position` property.
                    posterType: "jpg", // Poster image type. "detect" — auto-detection; "none" — no poster; "jpg", "png", "gif",... - extensions.
                    resizing: true
                });
            } else {
                $(".video-background").vide({
                    mp4: "videos/background-video.mp4",
                    webm: "videos/background-video.webm",
                    poster: "videos/video-poster.jpg"
                }, {
                    volume: 1,
                    playbackRate: 1,
                    muted: true,
                    loop: true,
                    autoplay: true,
                    position: "50% 100%", // Similar to the CSS `background-position` property.
                    posterType: "jpg", // Poster image type. "detect" — auto-detection; "none" — no poster; "jpg", "png", "gif",... - extensions.
                    resizing: true
                });
            };

        };
        if($(".video-background-banner").length>0) {
            if (Modernizr.touch) {
                $(".video-background-banner").vide({
                    mp4: "videos/background-video-banner.mp4",
                    webm: "videos/background-video-banner.webm",
                    poster: "videos/video-fallback.jpg"
                }, {
                    volume: 1,
                    playbackRate: 1,
                    muted: true,
                    loop: true,
                    autoplay: true,
                    position: "50% 50%", // Similar to the CSS `background-position` property.
                    posterType: "jpg", // Poster image type. "detect" — auto-detection; "none" — no poster; "jpg", "png", "gif",... - extensions.
                    resizing: true
                });
            } else {
                $(".video-background-banner").vide({
                    mp4: "videos/background-video-banner.mp4",
                    webm: "videos/background-video-banner.webm",
                    poster: "videos/video-banner-poster.jpg"
                }, {
                    volume: 1,
                    playbackRate: 1,
                    muted: true,
                    loop: true,
                    autoplay: true,
                    position: "50% 50%", // Similar to the CSS `background-position` property.
                    posterType: "jpg", // Poster image type. "detect" — auto-detection; "none" — no poster; "jpg", "png", "gif",... - extensions.
                    resizing: true
                });
            };
        };

该代码看起来像这样:Example

---

我尝试添加这段代码:

HTML

<div class="banner video-background-banner-test pv-40 dark-translucent-bg hovered">

JS

if($(".video-background-banner-test").length>0) {
            if (Modernizr.touch) {
                $(".video-background-banner-test").vide({
                    mp4: "videos/background-video-banner.mp4",
                    webm: "videos/background-video-banner.webm",
                    poster: "videos/video-fallback.jpg"
                }, {
                    volume: 1,
                    playbackRate: 1,
                    muted: true,
                    loop: true,
                    autoplay: true,
                    position: "50% 50%", // Similar to the CSS `background-position` property.
                    posterType: "jpg", // Poster image type. "detect" — auto-detection; "none" — no poster; "jpg", "png", "gif",... - extensions.
                    resizing: true
                });
            } else {
                $(".video-background-banner-test").vide({
                    mp4: "../videos/background-video-banner.mp4",
                    webm: "../videos/background-video-banner.webm",
                    poster: "../videos/video-banner-poster.jpg"
                }, {
                    volume: 1,
                    playbackRate: 1,
                    muted: true,
                    loop: true,
                    autoplay: true,
                    position: "50% 50%", // Similar to the CSS `background-position` property.
                    posterType: "jpg", // Poster image type. "detect" — auto-detection; "none" — no poster; "jpg", "png", "gif",... - extensions.
                    resizing: true
                });
            };
        };

视频播放了但是有一个类没有调用？因为高度不同:Example

Answer 1

该模板使用了一个名为 Vide 的插件为视频背景。 所以你会寻找一个 data-vide-bg 属性或像 $('selector').vide(options) 这样的行，我在 template .js(第 1340 行及以下)。这就是定义路径的地方。

如果您可以控制该文件，即如果您可以编辑它，则可以在其中添加逻辑以对您的子页面使用不同的路径。

如果您无法编辑该文件，则需要销毁之前的 Vide 实例并创建您自己的实例:

$('.video-background').data('vide').destroy();
$('.video-background').vide(pathOptions, playerOptions);

参见 here pathOptions 和 playerOptions 是什么。