播放另一个视频时停止视频答案

【问题标题】：Stop the Video When Play Another Video播放另一个视频时停止视频
【发布时间】：2019-01-26 07:30:02
【问题描述】：

在我的页面中，我有很多视频，我想在播放另一个 HTML5 视频时停止视频。

<?php

$result = "SELECT data from events_gallery where `events_id`='$id'";
$query = mysqli_query($db, $result);
$rows = mysqli_num_rows($query);

if($rows > 0){
while ($res = mysqli_fetch_array($query)) {
    $image = $res['data'];
}
?>
<div class="item active">
    <video controls="controls" playsinline width="180" height="300">
        <source src="images/video.mp4" type="video/mp4">
        <p>Video is not Supporting</p>
    </video>
</div>
<?php
}
?>

【问题讨论】：

stackoverflow.com/a/68391225/16441984的可能重复

标签： javascript php html

【解决方案1】：

这里是方法

<div class="item active"> 
    <video class="inlineVideo" controls="controls" playsinline width="180" height="300">
        <source src="images/video.mp4" type="video/mp4" >
        <p>Video is not Supporting</p>
    </video>
</div>


<script type="text/javascript">
    window.addEventListener('load', function(event){
        document.querySelectorAll(".inlineVideo").forEach((el) => {
            el.onplay = function(e){
                // pause all the videos except the current.
                document.querySelectorAll(".inlineVideo").forEach((el1) => {
                    if(el === el1)
                        el1.play();
                    else
                        el1.pause();
                });
            }
        });
    });
</script>

【讨论】：

确保将脚本标签放在 head 内，就在结束标签之前（之前），它会起作用。
lijaz 谢谢你。非常感谢你..这实际上是我需要的。??

【解决方案2】：

您应该依靠 HTML5 视频 API 来控制您的视频。这是一个很好的起点：https://www.html5rocks.com/en/tutorials/video/basics

我在您的代码中看不到您是如何加载所有视频的，但第一次尝试可能是在播放视频之前停止所有视频：

$(document).ready(function(){
    // Add an eventlistener to all videos to detect when they start playing.
    $("video").each(function(){
        var video = $(this)[0];
        video.addEventListener("playing", function() {
            // Stop all other videos.
            $("video").each(function(){
                if($(this)[0] != video)
                    video.pause(); 
            });
        }, true);
     );
  }
});

【讨论】：