html5 视频标签在没有上传视频时显示一个空的视频框。 我怎样才能隐藏这个空盒子？
[英]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:这是一个示例代码，其中 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>
Edit:编辑：
I want to clarify that there is a variable inside the src attribute that comes from php, ie, src="'.$row["image_name"].'" My program is a realtime comment system.我想澄清的是，src 属性中有一个来自 php 的变量，即src="'.$row["image_name"].'"我的程序是一个实时评论系统。 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.此外，在没有从 php mysql 上传视频的地方显示一个空视频框，当我发表评论时，它不会显示在屏幕上。 I do not have the same two problems with <img> tag. <img>标签没有同样的两个问题。 I have these two problems only with <video> tag.我只有<video>标签有这两个问题。
Here I created a test case using three JavaScript variables.在这里，我使用三个 JavaScript 变量创建了一个测试用例。 There are three videos with three variables, which are inside three src attributes.三个视频有三个变量，分别在三个 src 属性中。 (1) The first variable has the correct path and displays the video. (1) 第一个变量有正确的路径并显示视频。 (2) In the second variable, I removed one letter “b” from the url to make the url incorrect. (2) 在第二个变量中，我从 url 中删除了一个字母“b”，使 url 不正确。 It displays an empty video box on the screen.它在屏幕上显示一个空的视频框。 (3) I left the third variable empty. (3) 我将第三个变量留空。 This is the only one that works, ie, it doesn't display an empty video box.这是唯一有效的方法，即它不显示空的视频框。
For the second variable, JavaScript “undefined” property doesn't fix the problem.对于第二个变量，JavaScript“未定义”属性没有解决问题。
Here is the test case link to JSBin: https://jsbin.com/bolinut/edit?html,js,output这是 JSBin 的测试用例链接： https://jsbin.com/bolinut/edit?html,js,output
Here is the test case code:这是测试用例代码：
html 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 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>
3 个解决方案
解决方案1
1 2020-02-26 23:08:43
Not sure if this is possible in raw HTML, but this is certainly possibly in JavaScript.不确定这在原始 HTML 中是否可行，但这在 JavaScript 中肯定是可能的。 With JavaScript you can simply check what the src attribute of the <source> element points to, and if it's not set, you set the parent <video> element to have a display of none .使用 JavaScript，您可以简单地检查<source>元素的src属性指向什么，如果未设置，则将父<video>元素设置为display none 。
This can be seen in the following, where only one of the two videos is shown:这可以在下面看到，其中只显示了两个视频之一：
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>
解决方案2
0 已采纳 2020-03-04 19:21:30
Here is the solution:这是解决方案：
I found the solution in PHP and not in JavasScript.我在 PHP 中找到了解决方案，而不是在 JavaScript 中。 First, I found the file extension name to see if it is “mp4” or “jpg”, as follows: $ext = pathinfo($row["image_name"], PATHINFO_EXTENSION);首先找到文件扩展名，看是“mp4”还是“jpg”，如下： $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') {然后我创建了一个条件，如果文件扩展名为“mp4”，则显示其中包含视频标签的 PHP 字符串变量，如下所示： if ($ext === 'mp4') {
Here is the full PHP code of the relevant part:这是相关部分的完整 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;
解决方案3
0 2021-09-29 13:10:26
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.