html - 如何用嵌入的视频替换由菜单按钮调用的图像

Question

我正在尝试调整 Web 模板以满足我的需求。该网站看起来像这样一个：http ://tomcreus.com 在左下方有三个按钮（1,2,3），可以更改背景图片。我想用嵌入的视频替换图片。这可能吗？有多难？我需要发布代码的哪一部分来提供帮助？

编辑：

<ul class="pagination">
    <li class="current"><a href="images/bg_img1.jpg">1</a></li>
    <li><a href="images/bg_img1.jpg">2</a></li>
    <li><a href="images/bg_img3.jpg">3</a></li>
</ul>

先感谢您！

Answer 1

你可以像这样把video你的anchor标签放在里面。

<ul class="pagination">
    <li class="current">
        <a href="https://www.google.com/">
            <video width="320" height="270" controls>
                <source src="steve_powell_320_hard.mp4"  type="video/mp4; codecs=avc1.42E01E, mp4a.40.2">
                <source src="steve_powell_320_hard.webm" type="video/webm; codecs=vp8, vorbis">
                <source src="steve_powell_320_hard.ogv"  type="video/ogg; codecs=theora, vorbis">
            </video>
        </a>
    </li>
    <li><a href="images/bg_img1.jpg">2</a></li>
    <li><a href="images/bg_img3.jpg">3</a></li>
</ul>

只需src将source元素更改为系统/服务器上的物理视频文件或提供来自网站的视频的 URL。

编辑 ：

这个w3schools链接有助于嵌入youtube视频。此链接用于在您的 html 中嵌入物理视频文件。

编辑 ：

检查以下两个问题。你可能会从那里得到一些方向。那是为了HTML5

1. 视频作为网站背景？HTML 5
2. 您可以将 HTML5 显示为全屏背景吗？