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

debugcn 发表于 Dev

阿西夫汗

我正在处理一个搜索表单，它将从用户那里获取输入并显示视频的弹出窗口，用户输入和视频名称将相同。视频将在目录中，即 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">&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';
}

}


?>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。