我知道有类似的问题，但我还不能让它发挥作用。
此代码显示了一个 iframe 内的 YouTube 视频。单击按钮 (emsbinstartbutton) 时，视频被隐藏并替换为占位符。如果此占位符 ( threebytwo) 已关闭，则视频应再次显示。
目前这工作正常，除了当视频被隐藏时它会继续播放（你可以听到音频，当你回去时你可以看到它仍在播放）。隐藏时应停止视频。
<%@ 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>
我尝试了以下方法：
使用 .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);
});
});
即使视频在点击时停止，但当我尝试返回（附加）时，我会弹出一个对象错误。
停止和停止视频
所以在 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>
在 jQuery 中：
$(document).ready(function () {
$("#emsbinstartbutton").click(function () {
$holdera = $("#divbuyonlineVid").hide();
$holderb = $(".divbuyonlineVid").hide();
$("#player").stop();
$("#threebytwo").show();
});
});
这不会改变任何事情。并且：
$(document).ready(function () {
$("#emsbinstartbutton").click(function () {
$("#divbuyonlineVid").hide();
$(".divbuyonlineVid").hide();
$("#player").stopvideo();
$("#threebytwo").show();
});
});
单击按钮时，您仍然可以听到音频，但不会显示threebytwo。
我还添加了这个<script>：
<script type="text/javascript" src="http://www.youtube.com/player_api" ></script>
谁能指出我正确的方向或看看我哪里出错了？
编辑：shabeer90 描述了如何停止让我上路的 youtube 视频，但如果您只是想暂停它并将其保留在后台，则以下代码可能有用：
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:
<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>
非常感谢。