单击另一个视频时停止视频 [英] Stop a video when another one is clicked
本文介绍了单击另一个视频时停止视频的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在同一页面上有两个本地托管的视频.我试图在点击另一个时停止一个，但它不起作用.
我试过听在线课程，但没有奏效:
解决方案
如果您只想让一个视频在播放另一个视频时暂停，这可能会有所帮助.注意:除了视频的高度和宽度之外，我没有使用任何样式.此代码依赖于 来自 html 的 onplay 调用 和 pause()
function playVideo1() {document.getElementById('video2').pause();}函数 playVideo2() {document.getElementById('video1').pause();}<头><meta charset="utf-8"><title>停止任一</title><风格>#video1 {高度:200px；宽度:200px；向左飘浮;}#video2 {高度:200px；宽度:200px；浮动:对；}</风格><身体><视频控件 id="video1" onplay="playVideo1();"><source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="视频/mp4"></video><视频控件 id="video2" onplay="playVideo2();"><source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="视频/mp4"></video><script type="text/javascript" src="a.js"></script></html>I have two locally hosted videos on the same page. I am trying to stop one once another is clicked, but it does not work.
<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>
I have tried listening to the classes onlick, but it has not worked:
<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>
解决方案
If you only want that one video should pause when another is played this might help. Note: I am not using any style except for video's height and width . This code rely on onplay call from html and 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>
Video are from here and here i am not responsible for them.
这篇关于单击另一个视频时停止视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
