javascript - 如何使用按钮动态操作 HTML 中视频元素的数量？

Question

我是 HTML/CSS/JAVASCRIPT 的新手，我正在为我的学校设计一个 CCTV 仪表板。

如果这恰好是一个新手问题，请原谅我，我一直在寻找答案连续 2 天，但没有运气......

我们总共有 9 个 CCTV 场景需要显示，但我希望我的仪表板能够以 3 种不同的格式显示视频，即 1x1、2x2 和 3x3。

这是我的设计(请原谅我独特的设计 :))，如您所见，我有一个下拉按钮和标题“视频”一起 float 在 div 上。

这是我的下拉按钮的代码。

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
        <button onclick="myFunction()" class="dropbtn">
            <!-- <h4>Camera</h4> -->
            <b class="caret"></b>
        </button>
        <div id="myDropdown" class="dropdown-content">
            <a href="#">1x1</a>
            <a href="#">2x2</a>
            <a href="#">3x3</a>
        </div>
    </li>
</ul>

你们现在可能已经明白了......我正在考虑使用 javascript，每个按钮项都会将分配的参数传递给动态更新视频布局的函数。

当用户选择 1x1 时，我希望 html video 标签扩展其宽度和高度并占据整个 div。 2x2 和 3x3 也是如此。

这是我的视频片段。

<div style="padding: 0 0 0 12px;">
    <table>
        <tr>
            <video id="video1" width="360" controls style="padding: 5px 5px 5px 5px;">
                <source src="./assets/samples/trailer.mp4" type='video/mp4'>
            </video>
            <video id="video1" width="360" controls style="padding: 5px 5px 5px 5px;">
                <source src="./assets/samples/trailer.mp4" type='video/mp4'>
            </video>
            <video id="video1" width="360" controls style="padding: 5px 5px 5px 5px;">
                <source src="./assets/samples/trailer.mp4" type='video/mp4'>
            </video>
        </tr>
        <tr>
            <video id="video1" width="360" controls style="padding: 5px 5px 5px 5px;">
                <source src="./assets/samples/trailer.mp4" type='video/mp4'>
            </video>
            <video id="video1" width="360" controls style="padding: 5px 5px 5px 5px;">
                <source src="./assets/samples/trailer.mp4" type='video/mp4'>
            </video>
            <video id="video1" width="360" controls style="padding: 5px 5px 5px 5px;">
                <source src="./assets/samples/trailer.mp4" type='video/mp4'>
            </video>
        </tr>
        <tr>
            <video id="video1" width="360" controls style="padding: 5px 5px 5px 5px;">
                <source src="./assets/samples/trailer.mp4" type='video/mp4'>
            </video>
            <video id="video1" width="360" controls style="padding: 5px 5px 5px 5px;">
                <source src="./assets/samples/trailer.mp4" type='video/mp4'>
            </video>
            <video id="video1" width="360" controls style="padding: 5px 5px 5px 5px;">
                <source src="./assets/samples/trailer.mp4" type='video/mp4'>
            </video>
        </tr>
    </table>
</div>

Answer 1

您需要对视频标签使用相对宽度。

例如，你需要3个类:

.videocontrol { float:left; display: block; }
.width1 { width: 100%; }
.width2 { width: 50%; }
.width3 { width: 33.3%; }

然后是你的视频元素:

<div class="video-container">
    <video class="videocontrol width3" ..></video>
    <video class="videocontrol width3" ..></video>
    <video class="videocontrol width3" ..></video>

    <video class="videocontrol width3" ..></video>
    <video class="videocontrol width3" ..></video>
    <video class="videocontrol width3" ..></video>

    <video class="videocontrol width3" ..></video>
    <video class="videocontrol width3" ..></video>
    <video class="videocontrol width3" ..></video>
</div>

你的下拉列表:

<div id="myDropdown" class="dropdown-content">
    <a href="#" onclick="setVideoWidths(1);">1x1</a>
    <a href="#" onclick="setVideoWidths(2);">2x2</a>
    <a href="#" onclick="setVideoWidths(3);">3x3</a>
</div>

然后一点javascript:

function setVideoWidths(videoSize)
{
    $(".videocontrol")
        .removeClass("width1")
        .removeClass("width2")
        .removeClass("width3")
        .addClass("width" + videoSize);
}