我有一个隐藏的div包含一个YouTube视频<iframe>.当用户点击链接时,该div变为可见,然后用户应该能够播放视频.
当用户关闭面板时,视频应停止播放.我怎样才能做到这一点？
码:
<!-- link to open popupVid -->
<p><a href="javascript:;" onClick="document.getElementById('popupVid').style.display='';">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>
<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">
<iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40" frameborder="0" allowfullscreen></iframe>
<br /><br />
<a href="javascript:;" onClick="document.getElementById('popupVid').style.display='none';">
close
</a>
</div><!--end of popupVid -->
我正在使用YouTube iframe在我的网站上嵌入视频.
<iframe width="100%" height="443" class="yvideo" id="p1QgNF6J1h0"
src="http://www.youtube.com/embed/p1QgNF6J1h0?rel=0&controls=0&hd=1&showinfo=0&enablejsapi=1"
frameborder="0" allowfullscreen>
</iframe>
我在同一页面上播放视频.
我想使用javascript左键单击按钮来停止所有这些或其中一个.
可能吗？
我尝试了Talvi Watia所说和使用的内容:
$('#myStopClickButton').click(function(){
$('.yvideo').each(function(){
$(this).stopVideo();
});
});
我越来越:
Uncaught TypeError: Object [object Object] has no method 'stopVideo'
我有一个滑块,其中包含4个通过iframe嵌入代码嵌入的YouTube视频
http://www.youtube.com/embed/'.$i.'?enablejsapi=1
我试图让onStateChange四个视频中的任何一个事件调用我调用的函数stopCycle(),当视频开始播放时,它将停止滑块.iframe没有id.我不确定如何正确地捕捉这个事件,并且可以使用任何关于我做错的建议.
<script charset="utf-8" type="text/javascript" src="http://www.youtube.com/player_api"></script>
var playerObj = document.getElementById("tab2"); // the container for 1 of the 4 iframes
playerObj.addEventListener("onStateChange", "stopCycle");
function stopCycle(event) {
alert('Stopped!');
}
我正在创建一个带有bootstrap的网站,可以在这里找到 - http://www.branchingouteurope.com/digital-spark-testing/
如果选择视频图像,您将看到一个模态窗口,打开一个YouTube视频.我遇到的问题是当模态窗口关闭时,视频会继续播放.我希望在模态窗口关闭时停止播放此视频.
我看过网上看了很多解决方案,但似乎都没有.这是标记......
<span class="main_video">
<div data-toggle="modal" data-target="#myModal" style="cursor:pointer">
<img src="img/master/video.fw.png" height="81%" width="60%" alt="Digital Spark Video"/>
</div>
</span>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<iframe width="100%" height="100%" src="//www.youtube.com/embed/sIFYPQjYhv8?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
`
我希望了解如何构建一个允许多个用户在其计算机上同步观看同一YouTube视频的网络应用.例如,synchtube.com或watch2gether.com
我正在寻找一个简单的方法,可以使用通用的技术,如来实现PHP,jQuery而Apache.我目前正在考虑轮询(或彗星长轮询,但这需要更复杂的服务器设置,我希望避免),类似于Ajax聊天应用程序的实现方式 - 客户端不断检查服务器以查看哪个视频是播放.但是,我怀疑这里会出现延迟问题,因此视频不会完全同步.我还想不出更好的方法.
对于开发人员社区,对方法或代码片段的任何帮助都非常感谢!
有一段时间了,我写的一段javascript听某个页面上的youtube动作效果非常好.我正在使用Youtube的iframe js api:https://developers.google.com/youtube/iframe_api_reference.但是最近添加了一个内容,一个特定的YouTube视频,跟踪无法正常工作.事件根本不会发生.
在控制台中,我注意到此帖子消息错误:
Unable to post message to http://youtube.com. Recipient has origin http://www.youtube.com.
所以我自己的代码没有任何帮助.关于stackoverflow的一些问题表明这是一个启动new YT.player太快的问题,所以我尝试了很多东西,例如在加载时加载yt js api文件window并且之后只应用api,但这似乎没有任何好处.
我需要Youtube API的一些帮助并嵌入视频.我想在点击某个元素(div,link,td等)时停止视频.我现在试图让它只为1个视频工作,但这个脚本的最后一个功能应该是停止当前页面上加载的所有视频.我已经通过YT API文档阅读了但我真的是初学者,因此我仍然很难理解.
<html>
<head>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<a href="javascript:ytplayer.stopVideo()">Play</a>
<br/>
<iframe id="ytplayer" src="http://www.youtube.com/embed/8Ax-dAR3ABs?rel=0&iv_load_policy=3&showinfo=0&enablejsapi=1&version=3&playerapiid=ytplayer" type="application/x-shockwave-flash" frameborder="0" allowscriptaccess="always"></iframe>
</body>
</html>
提前感谢任何建议
我有一个音乐博客,其中包含各种嵌入式soundcloud和youtube播放器.
我想要做的是阻止任何音频同时播放.换句话说,当我正在播放YouTube视频时,如果我点击播放soundcloud嵌入,我希望youtube播放器暂停,反之亦然.
如果我点击播放另一个youtube播放器(soundcloud已经固有地这样做),我已经开发了暂停流媒体youtube播放器的代码.我只需要让它交叉兼容.真的很感激一些帮助,谢谢.
var playerCurrentlyPlaying = null;
var players = {}
YT_ready(function() {
$(".youtube_embed").each(function() {
var identifier = this.id;
var frameID = getFrameID(identifier);
if (frameID) {
players[frameID] = new YT.Player(frameID, {
events: {
"onStateChange": function(event){
if (event.data == YT.PlayerState.PLAYING)
{
if(playerCurrentlyPlaying != null &&
playerCurrentlyPlaying != frameID)
callPlayer( playerCurrentlyPlaying , 'pauseVideo' );
playerCurrentlyPlaying = frameID;
}
}
}
});
}
});
});
我使用过这些来源的函数: 用JavaScript或jQuery监听Youtube事件
YouTube iframe API:如何控制已经在HTML中的iframe播放器？
使用UniqueID()呈现HTML:
<span class="soundcloud_embed" id="soundcloud_post_312">
<iframe id="ui-id-1" width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F103518792&show_artwork=true&secret_token=s-LnOTK"></iframe> …我试图淡入youtube iframe嵌入,但它只适用于IE9,所有其他最新的浏览器(Safari,Opera,Chrome,Firefiox)它没有.iframe立即显示为将不透明度设置为0.
我在Windows上.
我错了什么？
ps:这适用于Vimeo youtube iframe嵌入.
的jsfiddle:
我在页面上有一堆旋转木马,每个都有视频和图像的混合.当用户通过单击其中一个轮播控件(左侧或右侧)退出视频时,我想停止播放Youtube视频.
我希望能够检测用户何时点击控件,根据正在播放的当前视频创建播放器,并关闭该视频.在我看过的其他例子中,玩家是在onYoutubeIframeAPIReady函数中声明的,但我认为最好不要为页面上的每个视频动态创建玩家.现在,我收到了错误
Uncaught TypeError: Object #<T> has no method 'stopVideo'
当我点击旋转木马控件时.但是,如果我输入
player.stopVideo();
在Chrome javascript控制台中,它运行正常.我究竟做错了什么？
<script>
var youtubeReady = false;
function onYouTubeIframeAPIReady(){
youtubeReady = true;
}
$('.carousel').on('slide', function(){
if(youtubeReady){
console.log("setting player");
var iframeID = $(this).find('.active').find('iframe').attr("id");
player = new YT.Player(iframeID);
player.stopVideo();
}
});
</script>
示例轮播:
<div class="mainPhoto carousel slide 523" id="carousel-523">
<div class="carousel-inner 523">
<div class="item active">
<div class="flex-video">
<a class="fancybox" href="http://www.youtube.com/embed/4pEqbs0ISaw?version=3&enablejsapi=1" rel="gallery 523" data-fancybox-type="iframe">
<iframe src="http://www.youtube.com/embed/4pEqbs0ISaw?version=3&enablejsapi=1" id="1188">
</iframe>
</a>
</div>
</div>
<div class="item">
<a class="fancybox" href="https://buildinprogress.s3.amazonaws.com/image/image_path/1189/2013-07-05_19.47.55.jpg" rel="gallery 523" data-fancybox-type="image">
<img alt="Preview_2013-07-05_19.47.55" …我想使用 JavaScript 在 Youtube 视频上启用画中画。我可以在 html 上这样做，<video>但在 Youtube 上似乎不可能这样做<iframe>。有人在这方面有任何领导吗？
我有这个测试滑块http://jsfiddle.net/dUyLY/2/
在Chrome中,它运行良好,但在Firefox和Safari中它会在动画完成后出错.在脚本文件中,我检查每个动画后,如果当前可见元素是youtube播放器,如果是,则播放视频.当离开幻灯片暂停时.
我在控制台中收到此错误 player.pauseVideo is not a function
有人有解决方案吗？
如何控制youtube视频播放和暂停取决于框架或播放器的可见性.有没有办法用youtube嵌入带有HTML标签的视频？
例如 :
<br><br><br>
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
<li class="tab-link" data-tab="tab-3">Tab Three</li>
<li class="tab-link" data-tab="tab-4">Tab Four</li>
</ul>
<div id="tab-1" class="tab-content current">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="tab-2" class="tab-content">
Duis aute irure dolor in …youtube-api ×9
javascript ×8
youtube ×8
jquery ×6
iframe ×2
video ×2
ajax ×1
api ×1
carousel ×1
events ×1
html5 ×1
modal-dialog ×1
php ×1
real-time ×1
soundcloud ×1