首页 > 解决方案 > 我很难同时显示视频和图像

问题描述

这是我的代码,现在我有 2 个过滤器,1 个用于仅显示图像,另一个用于仅显示视频。我遇到的困难是在同一行显示图像和视频。因为每当我这样做时,它都会显示视频/图像,然后显示一个空白视频/图像,具体取决于我的数据库中两个字段中的哪一个是空的。有谁知道我如何将视频和图像显示为默认值?

<?php
    include('config.php');
    
    session_start();
    
    ?>
 

<body class="body">
    

          
        <form method="post" action="index.php">
    <input type="submit" name="switch_video" value="switch to videos" id="switch_video">
    </form>
    <form method="post" action="index.php">
        <input type="submit" name="switch_image" value="switch to images" id="switch_image">
        </form> 
        </span>
          </div> 
</body>

<?php

if(isset($_POST['switch_video'])) {

$query = "SELECT * FROM meme_vote WHERE image = '' ORDER BY vote DESC LIMIT 500";
$res = mysqli_query($conn, $query);
} if(isset($_POST['switch_image'])) {
$query2 = "SELECT * FROM meme_vote WHERE video_location = '' ORDER BY vote DESC LIMIT 500";
$res_image = mysqli_query($conn, $query2); }



?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meme Voting System</title>
   <!-- Latest compiled and minified CSS -->
  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
</head>
<body>

<div class="container">
    <div class="row">
        <?php while($row = mysqli_fetch_assoc($res)){ $location = $row['video_location'];?>  

            <div class="col-md-4">
                <div class="post">
                    <h4 class="post-title"><?php echo $row['title']?></h4>
                    <div class="postdesign">
                         <a  href="big_meme.php?id=<?=$row['id'];?>">
                        <video src="<?php echo $row['video_location'] ?>" width="100%" height="240" controls></video>
                        </a>           <?php /*<img src="data:image/jpeg;base64, <?= base64_encode($row['image']) ?>" height="280" width="240px" class="img-thumnail" />*/ ?>
                         <span>
                    <a href="javascript:void(0)" class="btn btn-info btn-lg">
                   <span class="glyphicon glyphicon-thumbs-up " onclick="like_update('<?php echo $row['id']?>')">Like 
                        (<span class="like_loop_<?php echo $row['id']?>"><?php echo $row['vote']?></span>) 
                        </span> </a>
                    <p class="post_info"><?php echo 'Uploaded by: '; echo $row['username'] ?></p>
                        <p class="post_info"><?php echo 'Category: '; echo $row['category']?></p>
                         </span>
    
                    </div>
                 
                </div>
            </div>
        <?php }?>    
    </div>
</div>
    <div class="container">
    <div class="row">
        <?php while($row = mysqli_fetch_assoc($res_image)){?>  

            <div class="col-md-4">
                <div class="post">
                    <h4 class="post-title"><?php echo $row['title']?></h4>
                    <div class="postdesign">
                         <a  href="big_meme_image.php?id=<?=$row['id'];?>">
                        <img src="data:image/jpeg;base64, <?= base64_encode($row['image']) ?>" height="280" width="240px" class="img-thumnail" />
                        </a>             <?php /*<img src="data:image/jpeg;base64, <?= base64_encode($row['image']) ?>" height="280" width="240px" class="img-thumnail" />*/ ?>
                         <span>
                    <a href="javascript:void(0)" class="btn btn-info btn-lg">
                   <span class="glyphicon glyphicon-thumbs-up " onclick="like_update('<?php echo $row['id']?>')">Like 
                        (<span class="like_loop_<?php echo $row['id']?>"><?php echo $row['vote']?></span>) 
                        </span> </a>
                    <p class="post_info"><?php echo 'Uploaded by: '; echo $row['username'] ?></p>
                        <p class="post_info"><?php echo 'Category: '; echo $row['category']?></p>
                         </span>
    
                    </div>
                 
                </div>
            </div>
        <?php }?>    
    </div>
</div>
    <div class="container">
    <div class="row">
        <?php while($row = mysqli_fetch_assoc($res)){ $location = $row['video_location'];?>  

            <div class="col-md-4">
                <div class="post">
                    <h4 class="post-title"><?php echo $row['title']?></h4>
                    <div class="postdesign">
                         <a  href="big_meme.php?id=<?=$row['id'];?>">
                        <video src="<?php echo $row['video_location'] ?>" width="100%" height="240" controls></video>
                        </a>           <?php /*<img src="data:image/jpeg;base64, <?= base64_encode($row['image']) ?>" height="280" width="240px" class="img-thumnail" />*/ ?>
                         <span>
                    <a href="javascript:void(0)" class="btn btn-info btn-lg">
                   <span class="glyphicon glyphicon-thumbs-up " onclick="like_update('<?php echo $row['id']?>')">Like 
                        (<span class="like_loop_<?php echo $row['id']?>"><?php echo $row['vote']?></span>) 
                        </span> </a>
                    <p class="post_info"><?php echo 'Uploaded by: '; echo $row['username'] ?></p>
                        <p class="post_info"><?php echo 'Category: '; echo $row['category']?></p>
                         </span>
    
                    </div>
                 
                </div>
            </div>
        <?php }?>    
    </div>
</div>
<style>
    .post_info {
     position: relative; left: 140px; bottom: 40px; 
}
    .post {
        position: relative; top: 100px;
    }
 
   
    </style>
<script>
     function like_update(id){
        var cur_count = jQuery('.like_loop_'+id).html();
        cur_count++
        jQuery('.like_loop_'+id).html(cur_count);
        jQuery.ajax({
            url:'update_count.php',
            type:'post',
            data:'type=like&id='+id,
            success:function(result){
            }
        })
}
</script>
    <script>
    if ( window.history.replaceState ) {
  window.history.replaceState( null, null, window.location.href );
    }      </script>
</body>
</html>

标签: phphtmljquerymysql

解决方案


推荐阅读