创建一个搜索表单，该表单将从用户那里获取输入并显示视频弹出窗口答案

【问题标题】：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>

表单的输出是

需要的输出 例如

【问题讨论】：

标签： php jquery modal-dialog

【解决方案1】：

根据您的所需输出图像，这是一个 Youtube 视频嵌入，不需要文件存在于您的服务器目录中，只需 iframe 即可完成 Youtube 视频链接插入。一个例子是：

&lt;iframe width="854" height="480" src="https://www.youtube.com/embed/youtube_video_id" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen&gt;&lt;/iframe&gt;

但是，如果您希望从您的目录加载视频。然后您可以使用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">&times;</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... 非常感谢兄弟... 你是最棒的.. :)