I'm making a dynamic page loading video from a database and I want to watch them clicking on the button view, the problem is that the actual code always starts the same video regardless of which video I try to watch, how can I resolve it? I know the code isn't the best so I will accept every piece of advice, thanks. and here is my code:
<?php
require '../Tools/Database_connection.php';
$query = 'SELECT * FROM video';
if($result = $conn->query($query)){
$num = $conn->affected_rows;
if($num > 0) {
while($row = $result->fetch_array(MYSQLI_ASSOC)) { ?>
<div class='col'>
<div class='card shadow-sm'>
<title><?php echo $row['Title']; ?></title>
<img class='Thumbnail' src='<?php echo $row['Thumbnail']; ?>' alt='the Thumbnail didn t load'>
<div class='card-body'>
<p><?php echo $row['Title']; ?></p>
<p class='card-text'><?php echo $row['Description']; ?></p>
<div class='d-flex justify-content-between align-items-center'>
<div class='btn-group'>
<button type='button' class='btn btn-sm btn-outline-secondary' onclick='watch(<?php echo $row['video_id']; ?>)'>View</button>
<p>
<?php echo $row['video_id']."<br>".
$row['Location'];?>
</p>
<div class="player_video" style="visibility: hidden;">
<video controls id="<?php echo $row['video_id']; ?>">
<source src='<?php echo $row['Location']; ?>'>
</video>
</div>
<button type='button' class='btn btn-sm btn-outline-secondary'>Edit</button>
</div>
<small class='text-muted'>9 mins</small>
</div>
</div>
</div>
</div>
<?php }
}
$result->close();
}
?>
<script type="text/javascript">
function watch(){
document.getElementById("<?php echo $row['video_id']; ?>").style.visibility = "visible";
document.getElementById("<?php echo $row['video_id']; ?>").play();
confirm(<?php echo $row['video_id']; ?>);
}
</script>
The problem is here:
<video controls id="myVideo">
You must give every video a unique id, All videos in your page has the same id, So the code always play the same video.
You should make many changes to solve this first:
<button type='button' class='btn btn-sm btn-outline-secondary' onclick='watch(<?php echo $row['id']; ?>)'>View</button>
second:
<video controls id="<?php echo $row['id']; ?>">
Third: change javascript code to this:
function watch(videoId){
document.getElementById(videoId).style.visibility = "visible";
document.getElementById(videoId).play();
}
Your video tag is identified by an ID. So if you call the ID, only the first created tag will be set as visible then played. Try using a class instead. You should look about the var closestElement = targetElement.closest(selectors);
I didn't try but your code should look like :
<?php
require '../Tools/Database_connection.php';
$query = 'SELECT * FROM video';
if($result = $conn->query($query)){
$num = $conn->affected_rows;
if($num > 0) {
while($row = $result->fetch_array(MYSQLI_ASSOC)) { ?>
<div class='col'>
<div class='card shadow-sm'>
<title><?php echo $row['Title']; ?></title>
<img class='Thumbnail' src='<?php echo $row['Thumbnail']; ?>' alt='the Thumbnail didn t load'>
<div class='card-body'>
<p><?php echo $row['Title']; ?></p>
<p class='card-text'><?php echo $row['Description']; ?></p>
<div class='d-flex justify-content-between align-items-center'>
<div class='btn-group'>
<button type='button' class='btn btn-sm btn-outline-secondary' onclick='watch(e)'>View</button>
<div class="player_video" style="visibility: hidden;">
<video controls class="myVideos">
<source src='<?php echo $row['Location']; ?>'>
</video>
</div>
<button type='button' class='btn btn-sm btn-outline-secondary'>Edit</button>
</div>
<small class='text-muted'>9 mins</small>
</div>
</div>
</div>
</div>
<?php }
}
$result->close();
}
?>
<script type="text/javascript">
function watch(e){
e = e || window.event;
var src = e.target || e.srcElement;
var video = src.closest("video");
video.style.visibility = "visible";
video.play();
}
</script>