问题描述
我在同一页面上有两个本地托管的视频。我试图在点击另一个时停止一个,但它不起作用。
<div class="banner has-hover has-video is-full-height is-selected" id="banner-1353813713" style="position: absolute; left: 0%;">
<div class="banner-inner fill">
<div class="banner-bg fill">
<div class="bg fill bg-fill "></div>
<div class="video-overlay no-click fill visible"></div>
<video class="video-bg fill visible" preload="" playsinline="" autoplay="" muted="" loop=""> <source src="https://www.exampledomain/video1.mp4" type="video/mp4"></video> </div>
<div class="banner-layers container">
<div class="fill banner-link"></div>
<div id="text-Box-585511097" class="text-Box banner-layer x10 md-x10 lg-x10 y35 md-y35 lg-y35 res-text">
<div class="text-Box-content text dark">
<div class="text-inner text-center">
<a href="/offers/" target="_self" class="button white is-outline is-large offersbutton hidden" style="border-radius:1px;">
<span>View Video</span> </a>
<a href="/offers/" target="_self" class="button white is-outline is-large offersbutton hidden" style="border-radius:1px;">
<span>Offers</span></a>
<div class="video-button-wrapper" style="font-size:70%"><a href="https://www.exampledomain/video2.mp4" class="button open-video icon circle is-outline is-xlarge"><i class="icon-play" style="font-size:1.5em;"></i></a></div>
<p>Click to view full video</p>
</div>
</div>
我试过听在线课程,但没有奏效:
<script>
$(".video-bg fill visible").on("click",function() {
// All but not this one - pause
$(".video-bg fill visible").not( this ).each(function() {
this.pause();
});
// Play this one
// this.play();
// Or rather toggle play / pause
this[this.paused ? "play" : "pause"]();
});
</script>
解决方法
这是一个使用 vannila JS 的简单 POC,它依赖于 play
事件。您还可以使用 load()
代替 pause()
从头开始播放视频(而不是只是暂停)。
参考https://www.w3schools.com/tags/ref_av_dom.asp
// assume only one video is playing at a time
var videoPlaying = null;
const onPlay = function() {
if (videoPlaying && videoPlaying != this) {
videoPlaying.pause()
}
videoPlaying = this
}
// init event handler
const videos = document.getElementsByClassName("video-bg")
for (let i = 0; i < videos.length; i++) {
videos[i].addEventListener("play",onPlay)
}
<video id="video-1" class="video-bg" width="320" height="240" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<video id="video-2" class="video-bg" width="320" height="240" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
如果您只想让一个视频在播放另一个视频时暂停,这可能会有所帮助。 注意:除了视频的高度和宽度之外,我没有使用任何样式。此代码依赖于 来自 html 的 onplay 调用 和 pause()
function playVideo1() {
document.getElementById('video2').pause();
}
function playVideo2() {
document.getElementById('video1').pause();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Stop either</title>
<style>
#video1 {
height: 200px;
width: 200px;
float: left;
}
#video2 {
height: 200px;
width: 200px;
float: right;
}
</style>
</head>
<body>
<video controls id="video1" onplay="playVideo1();"><source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"></video>
<video controls id="video2" onplay="playVideo2();"><source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4"></video>
<script type="text/javascript" src="a.js"></script>
</body>
</html>
嗨测试了一个理论,但你必须创建按钮来播放/暂停
theory => 对所有视频标签做一个 .each
以下代码:当您单击“播放”=> 时,它会暂停正在播放的其他视频
喜欢这个
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" ></script>
<script>
function pause_all_videos () { $("video").each(function() { this.pause(); }); }
function playonly (vid) { pause_all_videos(); document.getElementById(vid).play(); }
</script>
<style>
div{padding:3px;margin:3px;}
</style>
<div>
<video id="v1" controls src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" ></video>
<div><span onclick="playonly('v1');" >PLAY</span> ----- <span onclick="pause_all_videos();" >PAUSE</span></div>
</div>
<hr>
<div>
<video id="v2" controls src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_640_3MG.mp4" ></video>
<div><span onclick="playonly('v2');" >PLAY</span> ----- <span onclick="pause_all_videos();" >PAUSE</span></div>
</div>