jQuery 单击外部按钮停止 iFrame 中的 YouTube 视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14136566/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stop YouTube video within iFrame on external Button click
提问by anna
I know there are similar questions to this, but I haven't quite been able to get it to work.
我知道有类似的问题，但我还没有完全能够让它发挥作用。
This code shows a YouTube video which is within an iframe. When a button (emsbinstartbutton) is clicked the video is hidden and replaced with a placeholder. If this place holder (threebytwo) is closed the video should show again.
此代码显示 iframe 内的 YouTube 视频。单击按钮 (emsbinstartbutton) 时，视频将隐藏并替换为占位符。如果此占位符 ( threebytwo) 关闭，则视频应再次显示。
At the moment this works fine except that when the video is hidden it will continue to play (you can hear the audio and when you go back you can see it is still playing). The video should be stopped when hidden.
目前这工作正常，除了当视频被隐藏时它会继续播放（你可以听到音频，当你回去时你可以看到它仍在播放）。隐藏时应停止视频。
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Widget.Master" Inherits="System.Web.Mvc.ViewPage<WidgetView>" %>
<%@ Import Namespace="WidgetData" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
<%= Html.WidgetTitle(Model) %>
</asp:Content>
<asp:Content ID="WidgetStyle" ContentPlaceHolderID="StyleContent" runat="server">
<%= Html.WidgetStyle(Model) %>
<%= Html.WidgetScripts(Model) %>
<script type="text/javascript">
// when they click on the buy now button we will hide the title and show the widget
//detach work to stop vid but can t get it back.....
$(document).ready(function () {
$("#emsbinstartbutton").click(function () {
$("#divbuyonlineVid").hide();
$(".divbuyonlineVid").hide();
$("#threebytwo").show();
});
});
// when they click on the x the widget should be hidden and the video shows again
$(document).ready(function () {
$("#closebtn").click(function () {
$("#divbuyonlineVid").show();
$(".divbuyonlineVid").show();
$("#threebytwo").hide();
});
});
</script>
<!-- playing with additional CSS needed to get the page behaving the way I want Will move this into the widget style once proven -->
<style type="text/css">
#threebytwo
{
display: none;
}
#emsbin2startbutton
{
cursor: pointer;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="divbuyonlineVid">
<!-- IMPORTANT the youtube video has to include &wmode=opaque at the end of the link so that the buynow button is above the video -->
<img class="emsbinstarttext" id="emsbinstarttext" src="http://static.e-talemedia.net/content/images/DoveYoutubeMessage.png" />
<img class="emsbinstartbutton" id="emsbinstartbutton" src="http://static.e-talemedia.net/content/images/DoveYoutubeBuyNowRed.png" />
alt="" />
<div class="divVidContainer">
<iframe id="player" width="640" height="360" src="http://www.youtube.com/embed/AvywK19yVEk?feature=player_embedded&wmode=opaque&enablejsapi=1"
frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div id="threebytwo" class="threebytwo">
<img class="closebtn" id="closebtn" src="http://static.e-talemedia.net/content/images/DoveYoutubeExit.png" />
<div class="threebytwomiddle">
<ul>
<% if (Model.ProductNotFound)
{ %>
<!-- List the retailers as we have none in stock -->
<%= Html.WidgetProductNotFoundList(Model) %>
<% }
else
{ %>
<%= Html.WidgetProductFoundList(Model) %>
<% } %>
</ul>
</div>
</div>
<%= Html.WidgetImpressionCode2(Model) %>
<%= Html.WidgetTrackingCode(Model) %>
</asp:Content>
I have tried the following:
我尝试了以下方法：
using .detach and append
使用 .detach 和 append
// when they click on the buy now button we will hide the title and show the widget
//detach work to stop vid but can t get it back.....
$(document).ready(function () {
$("#emsbinstartbutton").click(function () {
$holdera = $("#divbuyonlineVid").detach();
$holderb = $(".divbuyonlineVid").detach();
$("#threebytwo").show();
});
});
// when they click on the x the widget should be hidden and the video shows again
$(document).ready(function () {
$("#closebtn").click(function () {
$("#threebytwo").hide();
alert($holdera);
$("#divbuyonlineVid").append($holdera);
alert($holderb);
$(".divbuyonlineVid").append($holderb);
});
});
Even though the video stops on click, when I try to go back (Append) I get an object error pop up.
即使视频在点击时停止，当我尝试返回（附加）时，我会弹出一个对象错误。
Stop and StopVideo
停止和停止视频
So in the iframe, adding &enablejsapi=1:
所以在 iframe 中，添加&enablejsapi=1：
<iframe id="player" width="640" height="360" src="http://www.youtube.com/embed/AvywK19yVEk?feature=player_embedded&wmode=opaque&enablejsapi=1"
frameborder="0" allowfullscreen></iframe>
and in the jQuery:
在 jQuery 中：
$(document).ready(function () {
$("#emsbinstartbutton").click(function () {
$holdera = $("#divbuyonlineVid").hide();
$holderb = $(".divbuyonlineVid").hide();
$("#player").stop();
$("#threebytwo").show();
});
});
Which doesn't change anything. And also:
这不会改变任何东西。并且：
$(document).ready(function () {
$("#emsbinstartbutton").click(function () {
$("#divbuyonlineVid").hide();
$(".divbuyonlineVid").hide();
$("#player").stopvideo();
$("#threebytwo").show();
});
});
On the button click you can still hear the audio, but threebytwo does not show.
单击按钮时，您仍然可以听到音频，但threebytwo 不显示。
I have also added this <script>:
我还添加了这个<script>：
<script type="text/javascript" src="http://www.youtube.com/player_api" ></script>
Can anyone point me in the right direction or see where I'm going wrong?
谁能指出我正确的方向或看到我哪里出错了？
Edit: shabeer90 describes how to stop the youtube video which got me on my way but if you just wanted to pause it and keep it in the background the following code may be useful:
编辑：shabeer90 描述了如何停止让我上路的 youtube 视频，但如果您只想暂停它并将其保留在后台，以下代码可能有用：
jQuery:
jQuery：
<script type="text/javascript">
$(document).ready(function () {
var obj = $('object')
.wrap('<div id="test"></div>')
.find('embed').attr('src', function (i, s) { return s + '&enablejsapi=1&version=3' }).end()
.find('param[name=movie]').attr('value', function (i, v) { return v + '&enablejsapi=1&version=3' }).end()
.detach()
.appendTo($('#test'));
$(document).ready(function () {
$("#emsbinstartbutton").click(function () {
//Then assign the src to null, this then stops the video been playing
obj.find('embed')[0].pauseVideo();
$("body").append($("<div>").css({
position: "fixed"
, width: "640px"
, height: "425px"
, "background-color": "#000"
, opacity: 0.6
, "z-index": 999
, top: 0
, left: 0
}).attr("id", "page-cover"));
$("#threebytwo").show();
});
});
// when they click on the x the widget should be hidden and the video shows again
$(document).ready(function () {
$("#closebtn").click(function () {
// $("#divbuyonlineVid").show();
// $(".divbuyonlineVid").show();
$("#threebytwo").hide();
$("#page-cover").detach();
});
});
});
</script>
html:
html：
<div class="divbuyonlineVid">
<img class="emsbinstarttext" id="emsbinstarttext" src="http://static.e-talemedia.net/content/images/DoveYoutubeMessage.png" />
<img class="emsbinstartbutton" id="emsbinstartbutton" src="http://static.e-talemedia.net/content/images/DoveYoutubeBuyNowRed.png"
alt="" />
<div class="divVidContainer">
<object width="640" height="385">
<%--IMPORTANT - the embed video format has to change so that it is exactly like below with the /v/ and &hl=en_US&fs=1 and &wmode=opaque for the mask--%>
<param name="movie" value="http://www.youtube.com/v/fBZTbCrM2eQ&hl=en_US&fs=1&wmode=opaque ">
</param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/fBZTbCrM2eQ&hl=en_US&fs=1&wmode=opaque"
type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"
width="640" height="385" wmode="Opaque"></embed>
</object>
</div>
</div>
Many thanks.
非常感谢。
回答by shabeer90
You need to reset the link of the video, i had a similar problem this is how i solved it, i used jQuery in the process.
您需要重置视频的链接，我遇到了类似的问题，这就是我解决的方法，我在此过程中使用了 jQuery。
//First get the iframe URL
var url = $('#YourIFrameID').attr('src');
//Then assign the src to null, this then stops the video been playing
$('#YourIFrameID').attr('src', '');
// Finally you reasign the URL back to your iframe, so when you hide and load it again you still have the link
$('#YourIFrameID').attr('src', url);
Check this answer
检查这个答案
回答by Akhil MK
Well, you just need to change the source(src)attribute valueof iframetag. It's that simple! :)
那么，你只需要改变的源(src)属性值的IFRAME标签。就是这么简单！:)
With javascript, you can do it as follows:
使用 javascript，您可以按如下方式进行：
var stopButton = document.getElementById('video-close-button-id');
stopButton.onclick = function() {
var myPlayer = document.getElementById("youtube-player-id");
myPlayer.setAttribute("src", " ");
};
Happy coding.
快乐编码。
回答by Ruben Quintana
//in HTML
//在HTML中
<!--the button -->
<a class="button" data-open="videoModal" href="#">Example Video Modal</a>
<!--Modal Video -->
<div class="row" id="theVideo">
<div id="videoModal" class="reveal" data-reveal data-close-on-click="true">
<h2>This modal has video</h2>
<div class="flex-video">
<iframe id="youtubePlayer" width="854" height="480" src="https://www.youtube.com/embed/4z6aSO05YHg" frameborder="0" allowfullscreen allowscriptaccess="always"></iframe>
</div>
<button class="close-button" data-close aria-label="Close reveal" type="button" onClick="destroyVideo()">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
//in apps.js
//在apps.js中
function destroyVideo(){
var url = $('#youtubePlayer').attr('src');
$('#youtubePlayer').attr('src', '');
$('#youtubePlayer').attr('src', url);
}
//This work for Foundation 6.2
//这项工作适用于Foundation 6.2
