Question

我正在使用一个搜索表单，该表单将获取用户的输入并显示视频的弹出窗口，用户输入和视频名称将相同。视频将位于目录中，即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>

表单的输出为

必需的输出 例如

Answer 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" 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';
}

}


?>

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

1 个答案:

模式对话框

您的JavaScript

您的CSS

您的HTML

您的PHP文件（get_video.php）