html5 視頻標簽在沒有上傳視頻時顯示一個空的視頻框。我怎樣才能隱藏這個空盒子？

Question

這個空的視頻框既難看又丑陋。 我希望僅在上傳視頻時顯示視頻框。

這是一個示例代碼，其中 html5 視頻標簽顯示一個空視頻框：

<!DOCTYPE html>
<html>
<body>

<video preload="auto" width="600" height="400" controls>
   <source src="" type="video/mp4">
      Your browser doesn\'t support HTML 5.
 </video>

</body>
</html>

編輯：

我想澄清的是，src 屬性中有一個來自 php 的變量，即src="'.$row["image_name"].'"我的程序是一個實時評論系統。 此外，在沒有從 php mysql 上傳視頻的地方顯示一個空視頻框，當我發表評論時，它不會顯示在屏幕上。 <img>標簽沒有同樣的兩個問題。 我只有<video>標簽有這兩個問題。

在這里，我使用三個 JavaScript 變量創建了一個測試用例。 三個視頻有三個變量，分別在三個 src 屬性中。 (1) 第一個變量有正確的路徑並顯示視頻。 (2) 在第二個變量中，我從 url 中刪除了一個字母“b”，使 url 不正確。 它在屏幕上顯示一個空的視頻框。 (3) 我將第三個變量留空。 這是唯一有效的方法，即它不顯示空的視頻框。

對於第二個變量，JavaScript“未定義”屬性沒有解決問題。

這是 JSBin 的測試用例鏈接： https://jsbin.com/bolinut/edit?html,js,output

這是測試用例代碼：

html

<!DOCTYPE html>
<html>
<body>

 <video preload="auto" width="600" height="400" controls>
   <source src="vid1" type="video/mp4" id="myVideo1">
      Your browser doesn\'t support HTML 5.
 </video>

  <video preload="auto" width="600" height="400" controls>
   <source src="vid2" type="video/mp4" id="myVideo2">
      Your browser doesn\'t support HTML 5.
 </video>

  <video preload="auto" width="600" height="400" controls>
     <source src="vid3" type="video/mp4" id="myVideo3">
      Your browser doesn\'t support HTML 5.
 </video>

</body>
</html>

JavaScript

<script>
var vid1 = document.getElementById("myVideo1");
vid1.src = "https://www.w3schools.com/html/mov_bbb.mp4";

var vid2 = document.getElementById("myVideo2");
vid2.src = "https://www.w3schools.com/html/mov_bb.mp4";

var vid3 = document.getElementById("myVideo3");
vid3.src = "";

const videos = document.getElementsByTagName('source');
for (let i = 0; i < videos.length; i++) {
  if (!videos[i].src || videos[i].src == window.location.href || videos[i].src === "undefined") {
    videos[i].parentElement.style = "display: none";
  }
}
</script>

Answer 1

不確定這在原始 HTML 中是否可行，但這在 JavaScript 中肯定是可能的。 使用 JavaScript，您可以簡單地檢查<source>元素的src屬性指向什么，如果未設置，則將父<video>元素設置為display none 。

這可以在下面看到，其中只顯示了兩個視頻之一：

 const videos = document.getElementsByTagName('source'); for (let i = 0; i < videos.length; i++) { if (!videos[i].src || videos[i].src == window.location.href) { videos[i].parentElement.style = "display: none"; } }

 <!DOCTYPE html> <html> <body> <video preload="auto" width="600" height="400" controls> <source src="" type="video/mp4"> Your browser doesn\\'t support HTML 5. </video> <video preload="auto" width="600" height="400" controls> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> Your browser doesn\\'t support HTML 5. </video> </body> </html>

Answer 2

這是解決方案：

我在 PHP 中找到了解決方案，而不是在 JavaScript 中。 首先找到文件擴展名，看是“mp4”還是“jpg”，如下： $ext = pathinfo($row["image_name"], PATHINFO_EXTENSION); 然后我創建了一個條件，如果文件擴展名為“mp4”，則顯示其中包含視頻標簽的 PHP 字符串變量，如下所示： if ($ext === 'mp4') {

這是相關部分的完整 PHP 代碼：

foreach($result as $row) {

$ext = pathinfo($row["image_name"], PATHINFO_EXTENSION);

if  ($ext === 'mp4')  {

 $output .= '
 <div class="panel panel-default">
  <div class="panel-body">'.$row["comment"].'</div>

  <div class="panel-body">
   <video preload="auto" width="600" height="400" controls autoplay">
   <source src="'.$row["image_name"].'" type="video/mp4">
      Your browser doesn\'t support HTML 5.
   </video>
  </div>
</div>
 ';
}
}
echo $output;

Answer 3

 const videos = document.getElementsByTagName('source'); for (let i = 0; i < videos.length; i++) { if (.videos[i].src || videos[i].src == window.location.href) { videos[i].parentElement:style = "display; none"; } }

 <.DOCTYPE html> <html> <body> <video autoplay="autoplay" preload="auto" width="600" height="400" controls> <source src="" type="video/mp4"> Your browser doesn\'t support HTML 5: </video> <video preload="auto" width="600" height="400" controls> <source src="https.//www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> Your browser doesn\'t support HTML 5. </video> </body> </html>

html5 視頻標簽在沒有上傳視頻時顯示一個空的視頻框。我怎樣才能隱藏這個空盒子？

問題描述

3 個解決方案

解決方案1
1 2020-02-26 23:08:43

解決方案2
0 已采納 2020-03-04 19:21:30

解決方案3
0 2021-09-29 13:10:26

html5 視頻標簽在沒有上傳視頻時顯示一個空的視頻框。 我怎樣才能隱藏這個空盒子？

問題描述

3 個解決方案

解決方案1 1 2020-02-26 23:08:43

解決方案2 0 已采納 2020-03-04 19:21:30

解決方案3 0 2021-09-29 13:10:26

html5 視頻標簽在沒有上傳視頻時顯示一個空的視頻框。我怎樣才能隱藏這個空盒子？

解決方案1
1 2020-02-26 23:08:43

解決方案2
0 已采納 2020-03-04 19:21:30

解決方案3
0 2021-09-29 13:10:26