在外部按钮点击时停止iFrame内的YouTube视频 [英] Stop YouTube video within iFrame on external Button click

查看：100
本文介绍了在外部按钮点击时停止iFrame内的YouTube视频的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我知道有类似的问题，但我还没有完全实现。



此代码显示的是一段YouTube视频一个iframe。当点击一个按钮（emsbinstartbutton）时，视频将被隐藏并替换为一个占位符。如果此位置持有人（ threebytwo ）已关闭，则视频应再次显示。



目前，当视频被隐藏时，它将继续播放（您可以听到音频，当您返回时可以看到它仍在播放）。 

 <％@ Page Language =C＃MasterPageFile =〜/ Views / Shared /Widget.MasterInherits =System.Web.Mvc.ViewPage< WidgetView> ％GT; 
 
<％@ Import Namespace =WidgetData％> 
< asp：Content ID =Content1ContentPlaceHolderID =TitleContentrunat =server> 
<％= Html.WidgetTitle（模型）％> 
< / asp：Content> 
< asp：Content ID =WidgetStyleContentPlaceHolderID =StyleContentrunat =server> 
<％= Html.WidgetStyle（模型）％> 
<％= Html.WidgetScripts（模型）％> 
< script type =text / javascript> 
 
 //当他们点击立即购买按钮时，我们将隐藏标题并显示小部件
 //分离工作以停止vid，但无法取回它..... 
 $（document）.ready（function（）{
 $（＃emsbinstartbutton）。click（function（）{
 $（＃divbuyonlineVid）。hide（）; 
 $（。divbuyonlineVid）。hide（）; 
 $（＃threebytwo）。show（）; 
}）; 
}）; 
 
 
 //当他们点击x这个小部件应该被隐藏并且视频再次显示
 $（document）.ready（function（）{
 $ （#closebtn）。click（function（）{
 $（＃divbuyonlineVid）。show（）; 
 $（。divbuyonlineVid）。show（）; 
 $ （#threebytwo）。hide（）; 
}）; 
}）; 
 
< / script> 
<！ - 使用额外的CSS进行游戏，让页面以我想要的方式运行将一旦证明 - > 
< style type =text / css> 
 #threebytwo 
 {
 display：none; 
} 
＃emsbin2startbutton 
 {
 cursor：pointer; 
} 
< / style> 
< / asp：Content> 
< asp：Content ID =Content2ContentPlaceHolderID =MainContentrunat =server> 
< div class =divbuyonlineVid> 
 <！ - 重要YouTube视频必须在链接末尾包含& wmode = opaque，以便buynow按钮位于视频上方 - > 
< img class =emsbinstarttextid =emsbinstarttextsrc =http://static.e-talemedia.net/content/images/DoveYoutubeMessage.png/> 
  alt =/> 
< div class =divVidContainer> 
< iframe id =playerwidth =640height =360src =http://www.youtube.com/embed/AvywK19yVEk?feature=player_embedded&wmode=opaque&enablejsapi=1 
 frameborder =0allowfullscreen>< / iframe> 
< / div> 
< / div> 
< div id =threebytwoclass =threebytwo> 
 < div class =threebytwomiddle> 
< ul> 
 <％if（Model.ProductNotFound）
 {％> 
<！ - 列出零售商，因为我们没有库存 - > 
<％= Html.WidgetProductNotFoundList（模型）％> 
 <％} 
其他
 {％> 
<％= Html.WidgetProductFoundList（模型）％> 
<％}％> 
< / ul> 
< / div> 
< / div> 
<％= Html.WidgetImpressionCode2（模型）％> 
<％= Html.WidgetTrackingCode（模型）％> 
< / asp：Content>

我尝试了以下方法：

使用.detach和追加



  //当他们点击立即购买按钮时，我们将隐藏标题并显示小部件
 //分离工作来停止vid，但无法取回它..... 
 $（document）.ready（function（）{
 $（＃emsbinstartbutton）。click（function （）{
 $ holdera = $（＃divbuyonlineVid）。detach（）; 
 $ holderb = $（。divbuyonlineVid）。detach（）; 
 $（＃threebytwo ）.show（）; 
}）; 
}）; 
 
 
 //当他们点击x这个小部件应该被隐藏并且视频再次显示
 $（document）.ready（function（）{
 $ （#closebtn）。click（function（）{
 $（＃threebytwo）。hide（）; 
 alert（$ holdera）; 
 $（＃divbuyonlineVid） .append（$ holdera）; 
 alert（$ holderb）; 
 $（。divbuyonlineVid）。append（$ holderb）; 
}）; 
}）;

即使视频停止点击，当我尝试返回时（Append），我得到一个对象错误弹出。

Stop和StopVideo



因此，在iframe中，添加& ; enablejsapi = 1 ：

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

以及在jQuery中：



<$ p $ （）函数（）{
$ holdera = $（＃divbuyonlineVid ）.hide（）;
$ holderb = $（。divbuyonlineVid）。hide（）;
$（＃player）。stop（）;
$（＃threebytwo ）.show（）;
}）;
}）;

这不会改变任何东西。还有： 

  $（document）.ready（function（）{
 $（＃emsbinstartbutton）。点击（函数（）{
 $（＃divbuyonlineVid）。hide（）; 
 $（。divbuyonlineVid）。hide（）; 
 $（＃player）。 stopvideo（）; 
 $（＃threebytwo）。show（）; 
}）; 
}）;

点击按钮，您仍然可以听到音频，但threebytwo不会显示。



我还添加了< script> ：

 < script type =text / javascriptsrc =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（）{
 //然后将src分配给null，然后停止播放视频
 obj.find（'embed'）[0] .pauseVideo（）; 
 $（body）。append（$（< div>）。css（{
 position：fixed
，width：640px
，height ：425px
，background-color：＃000
，不透明度：0.6 
，z- index：999 
，top：0 
，left：0 
}）。attr（id，page-cover））; 
 
 $（＃threebytwo）。show（）; 
}）; 
}）; 
 
 //当它们点击x时，窗口部件应该被隐藏并且视频再次显示
 $（document）.ready（function（）{
 $（＃closebtn ）.click（function（）{
 // $（＃divbuyonlineVid）。show（）; 
 // $（。divbuyonlineVid）。show（）; 
 $ （#threebytwo）。hide（）; 
 $（＃page-cover）。detach（）; 
}）; 
}）; 
 
}）; 
< / script>

html： 

 < div class =divbuyonlineVid> 
< img class =emsbinstarttextid =emsbinstarttextsrc =http://static.e-talemedia.net/content/images/DoveYoutubeMessage.png/> 
< img class =emsbinstartbuttonid =emsbinstartbuttonsrc =http://static.e-talemedia.net/content/images/DoveYoutubeBuyNowRed.png
 alt =/> ; 
< div class =divVidContainer> 
< object width =640height =385> 
 <％ - 重要 - 嵌入式视频格式必须改变，以便与/ v /和& amp; hl = en_US& amp; fs = 1和& wmode = opaque完全相同为掩码 - ％> 
< param name =movievalue =http://www.youtube.com/v/fBZTbCrM2eQ&amp;hl=zh_CN&amp;fs=1&wmode=opaque> 
< / param> 
< param name =allowFullScreenvalue =true>< / param> 
< param name =allowscriptaccessvalue =always>< / param> 
< embed src =http://www.youtube.com/v/fBZTbCrM2eQ&amp;hl=zh_CN&amp;fs=1&wmode=opaque
 type =application / x -shockwave-flashallowscriptaccess =alwaysallowfullscreen =true
 width =640height =385wmode =Opaque>< / embed> 
< / object> 
 
< / div> 
< / div>

非常感谢。

解决方案



<$>

p $ p> //首先获取iframe URL
var url = $（'＃YourIFrameID'）。attr（'src'）;

//然后将src分配给null，然后停止视频播放
$（'＃YourIFrameID'）。attr（'src'，''）;

//最后你将URL重新分配给你的iframe，所以当你隐藏并重新加载时，你仍然有链接
$（'＃YourIFrameID'）。attr（'src' ，url）;

检查 answer

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.

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

  // 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 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:

 $(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.

I have also added this <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:

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 &amp;hl=en_US&amp;fs=1  and  &wmode=opaque for the mask--%>
                <param name="movie" value="http://www.youtube.com/v/fBZTbCrM2eQ&amp;hl=en_US&amp;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&amp;hl=en_US&amp;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.

解决方案

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.

//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

这篇关于在外部按钮点击时停止iFrame内的YouTube视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆