jquery – 停止iFrame中的YouTube视频外部按钮单击

前端之家收集整理的这篇文章主要介绍了jquery – 停止iFrame中的YouTube视频外部按钮单击前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我知道有类似的问题,但我还没有能够让它上班.

代码显示一个位于iframe内的YouTube视频.当点击按钮(emsbinstartbutton)时,视频被隐藏并替换为占位符.如果这个占位符(3bytwo)关闭,则视频应再次显示.

目前这个功能很好,除了当视频被隐藏后,它会继续播放(你可以听到音频,当你回去,你可以看到它仍在播放).隐藏视频时应停止.

  1. <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Widget.Master" Inherits="System.Web.Mvc.ViewPage<WidgetView>" %>
  2.  
  3. <%@ Import Namespace="WidgetData" %>
  4. <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
  5. <%= Html.WidgetTitle(Model) %>
  6. </asp:Content>
  7. <asp:Content ID="WidgetStyle" ContentPlaceHolderID="StyleContent" runat="server">
  8. <%= Html.WidgetStyle(Model) %>
  9. <%= Html.WidgetScripts(Model) %>
  10. <script type="text/javascript">
  11.  
  12. // when they click on the buy now button we will hide the title and show the widget
  13. //detach work to stop vid but can t get it back.....
  14. $(document).ready(function () {
  15. $("#emsbinstartbutton").click(function () {
  16. $("#divbuyonlineVid").hide();
  17. $(".divbuyonlineVid").hide();
  18. $("#threebytwo").show();
  19. });
  20. });
  21.  
  22.  
  23. // when they click on the x the widget should be hidden and the video shows again
  24. $(document).ready(function () {
  25. $("#closebtn").click(function () {
  26. $("#divbuyonlineVid").show();
  27. $(".divbuyonlineVid").show();
  28. $("#threebytwo").hide();
  29. });
  30. });
  31.  
  32. </script>
  33. <!-- playing with additional CSS needed to get the page behaving the way I want Will move this into the widget style once proven -->
  34. <style type="text/css">
  35. #threebytwo
  36. {
  37. display: none;
  38. }
  39. #emsbin2startbutton
  40. {
  41. cursor: pointer;
  42. }
  43. </style>
  44. </asp:Content>
  45. <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  46. <div class="divbuyonlineVid">
  47. <!-- IMPORTANT the youtube video has to include &wmode=opaque at the end of the link so that the buynow button is above the video -->
  48. <img class="emsbinstarttext" id="emsbinstarttext" src="http://static.e-talemedia.net/content/images/DoveYoutubeMessage.png" />
  49. <img class="emsbinstartbutton" id="emsbinstartbutton" src="http://static.e-talemedia.net/content/images/DoveYoutubeBuyNowRed.png" />
  50. alt="" />
  51. <div class="divVidContainer">
  52. <iframe id="player" width="640" height="360" src="http://www.youtube.com/embed/AvywK19yVEk?feature=player_embedded&wmode=opaque&enablejsapi=1"
  53. frameborder="0" allowfullscreen></iframe>
  54. </div>
  55. </div>
  56. <div id="threebytwo" class="threebytwo">
  57. <img class="closebtn" id="closebtn" src="http://static.e-talemedia.net/content/images/DoveYoutubeExit.png" />
  58. <div class="threebytwomiddle">
  59. <ul>
  60. <% if (Model.ProductNotFound)
  61. { %>
  62. <!-- List the retailers as we have none in stock -->
  63. <%= Html.WidgetProductNotFoundList(Model) %>
  64. <% }
  65. else
  66. { %>
  67. <%= Html.WidgetProductFoundList(Model) %>
  68. <% } %>
  69. </ul>
  70. </div>
  71. </div>
  72. <%= Html.WidgetImpressionCode2(Model) %>
  73. <%= Html.WidgetTrackingCode(Model) %>
  74. </asp:Content>

我已经尝试过以下内容

使用.detach并附加

  1. // when they click on the buy now button we will hide the title and show the widget
  2. //detach work to stop vid but can t get it back.....
  3. $(document).ready(function () {
  4. $("#emsbinstartbutton").click(function () {
  5. $holdera = $("#divbuyonlineVid").detach();
  6. $holderb = $(".divbuyonlineVid").detach();
  7. $("#threebytwo").show();
  8. });
  9. });
  10.  
  11.  
  12. // when they click on the x the widget should be hidden and the video shows again
  13. $(document).ready(function () {
  14. $("#closebtn").click(function () {
  15. $("#threebytwo").hide();
  16. alert($holdera);
  17. $("#divbuyonlineVid").append($holdera);
  18. alert($holderb);
  19. $(".divbuyonlineVid").append($holderb);
  20. });
  21. });

即使视频停止点击,当我尝试返回(附加)我得到一个对象错误弹出.

停止和停止视频

所以在iframe中,添加& enablejsapi = 1:

  1. <iframe id="player" width="640" height="360" src="http://www.youtube.com/embed/AvywK19yVEk?feature=player_embedded&wmode=opaque&enablejsapi=1"
  2. frameborder="0" allowfullscreen></iframe>

并在jQuery中:

  1. $(document).ready(function () {
  2. $("#emsbinstartbutton").click(function () {
  3. $holdera = $("#divbuyonlineVid").hide();
  4. $holderb = $(".divbuyonlineVid").hide();
  5. $("#player").stop();
  6. $("#threebytwo").show();
  7. });
  8. });

哪个不改变什么并且:

  1. $(document).ready(function () {
  2. $("#emsbinstartbutton").click(function () {
  3. $("#divbuyonlineVid").hide();
  4. $(".divbuyonlineVid").hide();
  5. $("#player").stopvideo();
  6. $("#threebytwo").show();
  7. });
  8. });

在按钮上点击你仍然可以听到音频,但是三比特不显示.

我也添加了这个< script&gt ;:

  1. <script type="text/javascript" src="http://www.youtube.com/player_api" ></script>

任何人都可以指向正确的方向,或看到我错了什么?

编辑:shabeer90描述了如何停止让我在我的路上的YouTube视频,但如果你只是想暂停它并保持在后台下面的代码可能是有用的:

jQuery的:

  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3. var obj = $('object')
  4. .wrap('<div id="test"></div>')
  5. .find('embed').attr('src',function (i,s) { return s + '&enablejsapi=1&version=3' }).end()
  6. .find('param[name=movie]').attr('value',v) { return v + '&enablejsapi=1&version=3' }).end()
  7. .detach()
  8. .appendTo($('#test'));
  9.  
  10. $(document).ready(function () {
  11. $("#emsbinstartbutton").click(function () {
  12. //Then assign the src to null,this then stops the video been playing
  13. obj.find('embed')[0].pauseVideo();
  14. $("body").append($("<div>").css({
  15. position: "fixed",width: "640px",height: "425px","background-color": "#000",opacity: 0.6,"z-index": 999,top: 0,left: 0
  16. }).attr("id","page-cover"));
  17.  
  18. $("#threebytwo").show();
  19. });
  20. });
  21.  
  22. // when they click on the x the widget should be hidden and the video shows again
  23. $(document).ready(function () {
  24. $("#closebtn").click(function () {
  25. // $("#divbuyonlineVid").show();
  26. // $(".divbuyonlineVid").show();
  27. $("#threebytwo").hide();
  28. $("#page-cover").detach();
  29. });
  30. });
  31.  
  32. });
  33. </script>

HTML:

  1. <div class="divbuyonlineVid">
  2. <img class="emsbinstarttext" id="emsbinstarttext" src="http://static.e-talemedia.net/content/images/DoveYoutubeMessage.png" />
  3. <img class="emsbinstartbutton" id="emsbinstartbutton" src="http://static.e-talemedia.net/content/images/DoveYoutubeBuyNowRed.png"
  4. alt="" />
  5. <div class="divVidContainer">
  6. <object width="640" height="385">
  7. <%--IMPORTANT - the embed video format has to change so that it is exactly like below with the /v/ and &amp;hl=en_US&amp;fs=1 and &wmode=opaque for the mask--%>
  8. <param name="movie" value="http://www.youtube.com/v/fBZTbCrM2eQ&amp;hl=en_US&amp;fs=1&wmode=opaque ">
  9. </param>
  10. <param name="allowFullScreen" value="true"></param>
  11. <param name="allowscriptaccess" value="always"></param>
  12. <embed src="http://www.youtube.com/v/fBZTbCrM2eQ&amp;hl=en_US&amp;fs=1&wmode=opaque"
  13. type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"
  14. width="640" height="385" wmode="Opaque"></embed>
  15. </object>
  16.  
  17. </div>
  18. </div>

非常感谢.

解决方法

你需要重置视频的链接,我有一个类似的问题,这是我如何解决它,我在使用jQuery的过程中.
  1. //First get the iframe URL
  2. var url = $('#YourIFrameID').attr('src');
  3.  
  4. //Then assign the src to null,this then stops the video been playing
  5. $('#YourIFrameID').attr('src','');
  6.  
  7. // Finally you reasign the URL back to your iframe,so when you hide and load it again you still have the link
  8. $('#YourIFrameID').attr('src',url);

检查这个answer

猜你在找的jQuery相关文章