web-dev-qa-db-fra.com

Arrêter la vidéo YouTube dans iFrame en cliquant sur un bouton externe

Je sais qu'il y a des questions similaires à cela, mais je n'ai pas encore réussi à le faire fonctionner.

Ce code montre une vidéo YouTube qui se trouve dans un iframe. Lorsque vous cliquez sur un bouton (emsbinstartbutton), la vidéo est masquée et remplacée par un espace réservé. Si cet espace réservé (threebytwo) est fermé, la vidéo devrait s'afficher à nouveau.

Pour le moment, cela fonctionne bien, sauf que lorsque la vidéo est masquée, la lecture continue (vous pouvez entendre le son et quand vous revenez en arrière, vous pouvez voir qu'il est toujours en cours de lecture). La vidéo doit être arrêtée lorsqu'elle est masquée.

 <%@ 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>

J'ai essayé ce qui suit:

en utilisant .detach et 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);
            });
        });

Même si la vidéo s’arrête au clic, lorsque j’essaie de revenir en arrière (Ajouter), une erreur d’objet s’affiche.

Stop et StopVideo

Donc, dans l'iframe, en ajoutant &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>

et dans le jQuery:

 $(document).ready(function () {
            $("#emsbinstartbutton").click(function () {
                $holdera = $("#divbuyonlineVid").hide();
                $holderb = $(".divbuyonlineVid").hide();
                $("#player").stop();
                $("#threebytwo").show();
            });
        });

Ce qui ne change rien. Et aussi:

 $(document).ready(function () {
            $("#emsbinstartbutton").click(function () {
                $("#divbuyonlineVid").hide();
                $(".divbuyonlineVid").hide();
                $("#player").stopvideo();
                $("#threebytwo").show();
            });
        });

Cliquez sur le bouton pour entendre le son, mais trois par deux ne s’affichent pas.

J'ai aussi ajouté ce <script>:

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

Quelqu'un peut-il me diriger dans la bonne direction ou voir où je me trompe?

Edit: shabeer90 explique comment arrêter la vidéo youtube qui m’a fait perdre mon chemin, mais si vous voulez juste la mettre en pause et la conserver en arrière-plan, le code suivant peut être utile:

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>

Merci beaucoup.

jqueryhtmlhtml5iframeyoutube
16
anna

Vous devez réinitialiser le lien de la vidéo. J'ai eu un problème similaire. Voici comment je l'ai résolu.

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

Cochez cette réponse

30
shabeer90

Eh bien, il vous suffit de changer la valeur de l'attribut source (src)de iframe . C'est si simple! :)

Avec javascript, vous pouvez le faire comme suit:

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

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

Bonne codage.

1
Akhil MK

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

// dans apps.js

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

// Ce travail pour Foundation 6.2

0
Ruben Quintana