我正在制作一個(gè)視頻共享網(wǎng)站，允許用戶登錄和上傳視頻。一切正常！問題是用js播放視頻不行；相反，只播放第一個(gè)視頻。這是我檢索視頻的代碼 (php/html) <?php include("conn.php"); $sql = mysqli_query($con, "SELECT * FROM uploads ORDER BY file_id DESC"); while ($row = mysqli_fetch_array($sql)) { $path = $row['path']; $caption = $row['caption']; ?><div class="responsive"> <div class="gallery"> <a href="#" onclick="play()"> <video width="600" height="400" id="video"> <source src="store/vids/<?php echo $path;?>" type="video/mp4"> </video> </a> <div class="desc"><br><?php echo $caption?> <span class="badge badge-pill badge-primary">Trending</span></div> </div></div><?php } ?>腳本看起來像：var video = document.getElementById("video"); function play() { if (video.paused) video.play(); else video.pause(); } 這個(gè)東西只播放我的數(shù)據(jù)庫(kù)表中的第一個(gè)視頻。歡迎任何答案，包括可以使工作更輕松的 js 庫(kù)。
1 回答
小怪獸愛吃肉
TA貢獻(xiàn)1852條經(jīng)驗(yàn) 獲得超1個(gè)贊
您可以在不需要 ID 屬性的情況下完成特定視頻的定位，而是使用querySelectorAll和querySelector（您也可以使用父/子/兄弟遍歷技術(shù)）
如果您創(chuàng)建一個(gè)nodelistusing ，querySelectorAll您可以在外部分配事件偵聽器而不是使用<a onclick='play()'>etc ，這是首選方法。該click事件已注冊(cè)為您可以發(fā)出另一個(gè)查詢以查找使用this的子元素thisquerySelector
<?php
include("conn.php");
$sql = mysqli_query($con, "SELECT * FROM uploads ORDER BY file_id DESC");
while ($row = mysqli_fetch_array($sql)) {
$path = $row['path'];
$caption = $row['caption'];
?>
<div class="responsive">
<div class="gallery">
<a href="#">
<video width="600" height="400">
<source src="store/vids/<?php echo $path;?>" type="video/mp4">
</video>
</a>
<div class="desc"><br><?php echo $caption?> <span class="badge badge-pill badge-primary">Trending</span></div>
</div>
</div>
<?php
}//close while loop
?>
<script>
Array.from( document.querySelectorAll('.gallery > a') ).forEach( a=>{
a.addEventListener('click',function(e){
var video=this.querySelector('video');
if( video.paused )video.play();
else video.pause();
// find other videos that are NOT the one just activated and pause them
Array.from( document.querySelectorAll('.gallery > a > video') ).forEach( el=>{
if( el!=video )el.pause()
})
})
})
</script>
- 1 回答
- 0 關(guān)注
- 168 瀏覽
添加回答
舉報(bào)
0/150
提交
取消