html5 video tag displays an empty video box when no video is uploaded. How can I hide this empty box?

This empty video box is unsightly and ugly. I want the video box to be displayed only when I upload a video.

Here is an example code where html5 video tag displays an empty video box:

<!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>

Edit:

I want to clarify that there is a variable inside the src attribute that comes from php, i.e., src="'.$row["image_name"].'" My program is a realtime comment system. In addition that an empty video box is displayed where there is no video uploaded from php mysql, when I post a comment, it does not get displayed on the screen. I do not have the same two problems with <img> tag. I have these two problems only with <video> tag.

Here I created a test case using three JavaScript variables. There are three videos with three variables, which are inside three src attributes. (1) The first variable has the correct path and displays the video. (2) In the second variable, I removed one letter “b” from the url to make the url incorrect. It displays an empty video box on the screen. (3) I left the third variable empty. This is the only one that works, i.e., it doesn’t display an empty video box.

For the second variable, JavaScript “undefined” property doesn’t fix the problem.

Here is the test case link to JSBin: https://jsbin.com/bolinut/edit?html,js,output

Here is the test case code:

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

Here is the solution:

I found the solution in PHP and not in JavasScript. First, I found the file extension name to see if it is “mp4” or “jpg”, as follows: $ext = pathinfo($row["image_name"], PATHINFO_EXTENSION); Then I created a condition so if the file extension is “mp4”, PHP string variable with the video tag inside it to be displayed, as follows: if ($ext === 'mp4') {

Here is the full PHP code of the relevant part:

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;

Advertisement

Answer