我是HTML/CSS/JAVASCRIPT中的新成員,我正在爲我的學校設計閉路電視控制面板。如何使用按鈕動態地處理HTML中的視頻元素數量?
請原諒我,如果這恰好是一個新手的問題,我一直在尋找答案的直上2天,但沒有運氣...
我們總共有需要可以顯示9分CCTV的場面,但我希望我的儀表板能夠以3種不同格式(1x1,2x2和3x3)呈現視頻。
這是我設計的(請原諒我的獨特的設計:)),並且你可以看到我有一個下拉按鈕,在一個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視頻標籤擴展其寬度和高度,佔據整個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>
感謝您到目前爲止發佈您的HTML,但我沒有看到在自己的JavaScript任何嘗試,或「問題」關閉的工作(例如,「它給出了一個錯誤!」) 。堆棧溢出通常傾向於人們自己嘗試解決問題(使用互聯網上廣泛使用的JavaScript學習資源),如果您能向我們展示一個您無法解決的問題,那麼我們可以提供幫助。您的總體目標是「在下拉更改中,循環瀏覽所有視頻元素並根據新值更改其大小」 – Katana314