我知道有类似的问题,但我还没有能够让它上班.
此代码显示一个位于iframe内的YouTube视频.当点击按钮(emsbinstartbutton)时,视频被隐藏并替换为占位符.如果这个占位符(3bytwo)关闭,则视频应再次显示.
目前这个功能很好,除了当视频被隐藏后,它会继续播放(你可以听到音频,当你回去,你可以看到它仍在播放).隐藏视频时应停止.
<%@ 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并附加
// 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();
});
});
在按钮上点击你仍然可以听到音频,但是三比特不显示.
我也添加了这个< 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',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>
非常感谢.
解决方法
你需要重置视频的链接,我有一个类似的问题,这是我如何解决它,我在使用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);
检查这个answer
原文地址：https://www.jb51.cc/jquery/180448.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
