创建一个搜索表单，该表单将从用户那里获取输入并显示视频弹出窗口
Posted
技术标签:
【中文标题】创建一个搜索表单，该表单将从用户那里获取输入并显示视频弹出窗口【英文标题】：Create a search form that will get the input from the user and will show the popup of video 【发布时间】：2018-08-13 08:51:14 【问题描述】：我正在开发一个搜索表单，该表单将从用户那里获取输入并显示视频弹出窗口，用户输入和视频名称将相同。 视频将在目录中，即 1.mp4、2.mp4 等
现在我的编码仅用于显示链接，我希望如果视频名称和搜索文本字段输入相同，则应该打开视频弹出窗口。 我不知道如何合并将自动播放的视频模式/弹出窗口。请帮忙。 提前非常感谢。
这是我的代码
<!DOCTYPE html>
<html>
<head>
<title>Find Your Seat</title>
</head>
<body>
<h2>find your seat</h2>
<form method="post">
<input type="text" name="search" id="search" placeholder="type your seat id">
<button type="submit" name="submit" id="submit">Enter</button>
</form>
<?php
if(isset($_POST['submit']))
$filename = $_POST['search'];
$dir = "videos";
// Open a known directory, and proceed to read its contents
if (is_dir($dir))
if ($dh = opendir($dir))
while (($file = readdir($dh)) !== false)
if($file == $_POST['search'])
echo('<a href="'.$dir . $file.'">'. $file .'</a>'."\n");
closedir($dh);
?>
</body>
</html>
表单的输出是
需要的输出 例如
【问题讨论】：
【参考方案1】：根据您的所需输出图像，这是一个 Youtube 视频嵌入，不需要文件存在于您的服务器目录中，只需 iframe 即可完成 Youtube 视频链接插入。一个例子是：
<iframe width="854" height="480" src="https://www.youtube.com/embed/youtube_video_id" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>但是，如果您希望从您的目录加载视频。然后您可以使用video 元素。例子是：
...
echo('<video src="src_to_your_video.mp4" controls />');
...模态对话框
如果您希望这些结果出现在模态对话框中，那么您可以在同一页面上使用 AJAX 发出请求并将结果显示为弹出窗口。像这样的东西应该使用 jQuery。
你的 javascript
//Provided you have the jQuery libary loaded to your script
$("#seat_form").submit(
function(e)
//Prevent the form from reloading or submitting
e.preventDefault();
//Get the user input value
var search = $("#search");
$.ajax(
method:"POST",
url: "get_video.php",
data: search:search.val(),
success:function(response)
//Set the inner HTML of the modal to the response
$("#modal_body").html(response)
// Fade in the modal to show popoup
$("#modal").fadeIn();
,
error: function()
//Handle your errors here in case the requests is not successful
)
);
//Make the modal close when the close is clicked
$("#close").click(function()
$("#modal").fadeOut()
)你的 CSS
#modal
display:none;
position:fixed;
background:rgba(0,0,0,.7);
width:100;
left:0;
top:0;
bottom:0;
#close
color:white;
position:absolute:
font-size:1em;
right:10px;
top:10px;
cursor:pointer;
#modal_body
width:100%;
overflow:hidden;
您的 HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Find Your Seat</title>
</head>
<body>
<h2>find your seat</h2>
<form method="post" id="seat_form">
<input type="text" name="search" id="search" placeholder="type your seat id">
<button type="submit" name="submit" id="submit">Enter</button>
</form>
<!-- Define your modal HTML -->
<div id="modal">
<span id="close">×</span>
<div id="modal_body"></div>
</div>
</body>
</html>
您的 PHP 文件 (get_video.php)
<?php
//First confirm if the request is coming from a POST, and then check if it is AJAX
if(isset($_POST) && strtolower($_SERVER["HTTP_X_REQUESTED_WITH"]) == "xmlhttprequest")
if(isset($_POST['search']))
$filename = $_POST['search'];
$dir = "videos";
// Open a known directory, and proceed to read its contents
if (is_dir($dir))
if ($dh = opendir($dir))
while (($file = readdir($dh)) !== false)
if($file == $_POST['search'])
echo("<video src='$dir.$file' height='500' width='500' controls />");
closedir($dh);
else
echo 'Error: please input a search string';
?>【讨论】：
非常感谢 Erisan Olasheni，您解决了我的问题，它运行良好。只有一件小事，即文件的扩展名，我必须搜索带有扩展名的完整文件名，我想搜索没有扩展名的文件，即 myvideo 而不是 myvideo.mp4 好的，如果您确定文件扩展名是静态的 (.mp4)，您可能想要这样做，那么您的 PHP 代码可能如下所示：if($file == $_POST['search'].".mp4")
如果您确定文件名不会出现字母大小写问题，并且您还希望减少通过您的用户if(strtolower($file) == strtolower($_POST['search'].".mp4"))
yaaah !!.. hurryyyyyyyyyyyy... 非常感谢兄弟... 你是最棒的.. :)以上是关于创建一个搜索表单，该表单将从用户那里获取输入并显示视频弹出窗口的主要内容，如果未能解决你的问题，请参考以下文章