如何使用按鈕動態地處理HTML中的視頻元素數量？

我是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>

來源

2016-07-25 J.Doe

感謝您到目前爲止發佈您的HTML，但我沒有看到在自己的JavaScript任何嘗試，或「問題」關閉的工作（例如，「它給出了一個錯誤！」）。堆棧溢出通常傾向於人們自己嘗試解決問題（使用互聯網上廣泛使用的JavaScript學習資源），如果您能向我們展示一個您無法解決的問題，那麼我們可以提供幫助。您的總體目標是「在下拉更改中，循環瀏覽所有視頻元素並根據新值更改其大小」 – Katana314

您需要對視頻標籤使用相對寬度。

例如，你需要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); 
}

來源

2016-07-25 13:26:40

有很多方法可以實現你想要的。

通過使用jQuery，您可以根據用戶單擊的內容爲video元素指定百分比寬度，並在不更改html的情況下輕鬆實現所需內容。

因爲你的鏈接是按升序排列的，我只是得到點擊元素的索引，我加了一個，因爲索引從0開始，然後除以100。然後使用jQuery的attr()函數，我們可以改變所有的videos元素的寬度。

因此，對於第一個選項1x1我們有100/l = 100％width.For第二選項2x2我們有100/2 = 50％的寬度....

$("#myDropdown").on("click","a",function(){ 
    $("video").attr("width",(100/($(this).index()+1))+"%"); 
    });

我也刪除內聯補白你有這樣的百分比寬度可以正常工作。

https://jsfiddle.net/6aq6ao14/21/

來源

2016-07-25 13:33:35

如何使用按鈕動態地處理HTML中的視頻元素數量？

回答

相關問題