php - 创建一个搜索表单,该表单将从用户那里获取输入并显示视频弹出窗口
问题描述
我正在开发一个搜索表单,该表单将从用户那里获取输入并显示视频弹出窗口,用户输入和视频名称将相同。视频将在目录中,即 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>
形式的输出是
例如所需的输出
解决方案
根据您所需的输出图像,这是一个 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" height="500" width="500" 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';
}
}
?>
推荐阅读
- python - 如何在 Kivy 中填充小部件?
- python - CS50 金融的符号无效,即使我使用了正确的符号
- c# - 当您将 lambda 函数作为参数传递给任务时,它是在任务线程还是调用者线程上运行?
- python - 如何去掉方括号
- reactjs - ag-grid-react reactjs中的行点击事件的名称是什么?
- node.js - 我想读取一个 Json 并返回所有具有相同“TANK”的“OP”(我正在使用节点)。根据例子
- algorithm - Kotlin:如何从 Android 上的 firebase 获取用户电子邮件/用户名
- python - 删除不需要的字符,并从 JSON 响应中写入
- php - 找不到表
- c# - 根据选中时切换内容的 ToggleButton 制作自定义控件(VisualState 问题)