Question

所以问题是我需要一个链接，这会导致将背景视频转换为背景颜色（或回退图像），反之亦然。

借助HTML5

，我的视频可见

    <video autoplay loop poster="img/fallback.png" muted="muted" id="bgvid">
        <source src="bg.webm" type="video/webm">
        <source src="bg.mp4" type="video/mp4">
    </video>

链接应将背景视频更改为纯色或图像。点击链接也会改变其内容。

Answer 1

你可以通过淡出视频来显示jQuery的背景颜色：

<强> DEMO

HTML：

<video autoplay loop poster="img/fallback.png" muted="muted" id="bgvid">
    <source src="bg.webm" type="video/webm">
        <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>
<button type="button">Give me color</button>
<button id="vid" type="button">Give me video</button>

jQuery：

$('button').click(function () {
    $('video').fadeToggle(500);
    $('button').fadeToggle(500);
});

CSS：

body {
    background:gold;
    margin:0;
}
video {
    min-width:100%;
    min-height:100%;
    width:auto;
    height:auto;
}
button {
    position:absolute;
    top:10%;
    left:10%;
}
#vid {
    display:none;
}

将背景视频切换为背景颜色

1 个答案: