Jquery如何在播放下一个视频之前关闭上一个视频
Jquery how to close last video before streaming the next?
我正在处理这段代码从过去的2天。我试了很多方法,但都没能达到我想要的效果。
这是我的代码
<html>
<body>
<a href="#" onclick="myLink('0HTo_ySoct4');">Click me!</a>
<a href="#" onclick="myLink('PxWDfisVmzg');">Click me!</a>
<div id="0HTo_ySoct4">The text will get loaded here</div>
<div id="PxWDfisVmzg">The text will get loaded here</div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
function myLink(Yt) {
var yout = Yt;
var myurl = '<iframe src="https://www.youtube.com/embed/' + yout + '?autoplay=1&rel=0&controls=1" width="450" height="300" frameborder="0" class="player"></iframe>';
$('.player').hide();
$("#"+yout).html(myurl);
}
</script>
</body>
</html>
让我解释一下我想要什么以及代码在做什么。
看,我有两个点击我标签。我可以有更多点击我TAB在20左右,这取决于结果。
All选项卡包含youtube视频id。
所以当我点击任何点击我标签播放视频。视频将被加载到相关的div中。我想加载每个视频正好低于他们的特定视频描述/细节。它工作,但有一个bug。
错误是,当我试图点击第二个点击我标签。第一个将从网页中隐藏,但视频仍将在后台播放,您将听到两个视频的音频。
我想在播放下一个视频之前完全关闭上一个视频。我做了很多改变,但没有得到修复,所以现在我需要一点帮助,从你的专家家伙。
请帮帮我。
在播放下一个视频之前,我怎么才能完全关闭上一个视频?只是因为div id不同,我有这个问题,但我需要在我的项目。
提前致谢
像这样做
<html>
<body>
<a href="#" onclick="myLink('0HTo_ySoct4');">Click me!</a>
<a href="#" onclick="myLink('PxWDfisVmzg');">Click me!</a>
<div class="youtubeVideo" id="0HTo_ySoct4">The text will get loaded here</div>
<div class="youtubeVideo" id="PxWDfisVmzg">The text will get loaded here</div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
function myLink(Yt) {
var yout = Yt;
var myurl = '<iframe src="https://www.youtube.com/embed/' + yout + '?autoplay=1&rel=0&controls=1" width="450" height="300" frameborder="0" class="player"></iframe>';
$('.player').hide();
$(".youtubeVideo").empty();
$("#"+yout).html(myurl);
}
</script>
</body>
</html>
基本上是在加载新视频之前清空所有显示视频的div
相关文章:
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 如何将值传递到上一个html页面
- Javascript获取上一个元素的内容
- 禁用旋转木马中的下一个按钮和上一个按钮
- 引用vue.js中v-for中的上一个值
- DOM导航-上一个同级未定义
- 构建JS测试,警报窗口重复上一个Q,而不是问下一个Q
- 如何在用户返回和上一个按钮时刷新下拉列表
- 删除“;上一个“;以及“;下一个“;基于当前幻灯片
- 如何在视频上显示海报图像使用Jquery结束
- 简单的垂直上一个和下一个按钮代码点击上下移动jQuery
- HTML5历史记录-返回上一个完整页面按钮
- 算法:从数组(javascript/angular)中按当前日期获取上一个和下一个事件
- 如何选择给定类的上一个元素
- 用键盘分页jQuery下一个和上一个控件.触发器('点击')不'不起作用
- 尝试运行下一个上一个按钮以播放列表媒体播放器代码中的视频,出现错误
- HTML5视频上一个 - 下一个和自动播放
- jQuery播放下一个视频上的滚动
- Jquery如何在播放下一个视频之前关闭上一个视频
- 上传图像/视频到一个单独的服务器- Javascript流星