Estoy haciendo una página dinámica cargando video desde una base de datos y quiero verlos haciendo clic en el botón de vista, el problema es que el código real siempre inicia el mismo video, independientemente del video que intente ver, ¿cómo puedo resolverlo? ? Sé que el código no es el mejor, así que aceptaré todos los consejos, gracias. y aquí está mi código:
<?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>El problema está aquí:
<video controls id="myVideo">Debe otorgar a cada video una identificación única, todos los videos en su página tienen la misma identificación, por lo que el código siempre reproduce el mismo video.
Debes hacer muchos cambios para resolver esto primero:
<button type='button' class='btn btn-sm btn-outline-secondary' onclick='watch(<?php echo $row['id']; ?>)'>View</button>segundo:
<video controls id="<?php echo $row['id']; ?>">Tercero: cambie el código javascript a esto:
function watch(videoId){ document.getElementById(videoId).style.visibility = "visible"; document.getElementById(videoId).play(); }Su etiqueta de video se identifica mediante una identificación. Entonces, si llama a la ID, solo la primera etiqueta creada se configurará como visible y luego se reproducirá. Intente usar una clase en su lugar. Debería mirar sobre la var closestElement = targetElement.closest(selectors);
No lo intenté, pero tu código debería verse así:
<?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>