我知道有类似的问题,但我还没有能够让它上班.
此代码显示一个位于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