it-swarm.com.ru

Остановить видео YouTube в iFrame по внешнему нажатию кнопки

Я знаю, что есть похожие вопросы, но я не смог заставить его работать.

Этот код показывает видео YouTube, которое находится в пределах iframe. При нажатии кнопки (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 и добавить

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

Большое спасибо.

16
anna

Вам нужно сбросить ссылку на видео, у меня была похожая проблема, вот как я ее решил, в процессе я использовал 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);

Проверить это ответ

30
shabeer90

Что ж, вам просто нужно изменить значение атрибута source (src)of iframe tag. Это так просто! :)

С помощью JavaScript вы можете сделать это следующим образом:

var stopButton = document.getElementById('video-close-button-id');

stopButton.onclick = function() {
  var myPlayer = document.getElementById("youtube-player-id"); 
  myPlayer.setAttribute("src", " ");
}; 

Удачного кодирования.

1
Akhil MK

// в HTML

<!--the button -->
<a class="button" data-open="videoModal" href="#">Example Video Modal</a>
<!--Modal Video -->
<div class="row" id="theVideo">
    <div id="videoModal" class="reveal" data-reveal data-close-on-click="true">
    <h2>This modal has video</h2>
        <div class="flex-video">
            <iframe id="youtubePlayer" width="854" height="480" src="https://www.youtube.com/embed/4z6aSO05YHg" frameborder="0" allowfullscreen allowscriptaccess="always"></iframe>
        </div>
        <button class="close-button" data-close aria-label="Close reveal" type="button" onClick="destroyVideo()">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
</div>

// в apps.js

function destroyVideo(){
    var url = $('#youtubePlayer').attr('src');
    $('#youtubePlayer').attr('src', '');
    $('#youtubePlayer').attr('src', url);
}

// Эта работа для Фонда 6.2

0
Ruben Quintana