locked
How to play Youtube video through Youtube IframeApi on ajax success RRS feed

  • Question

  • User-1257308419 posted

    i have this code which does something via ajax i need to play a video on success function of ajax

    right now i am able to play video on page load automatically which i want but as soon as video stops what i need is to play it again but via a button click 

    <div id="responsive-iframe"></div>
    
                                        <script>
                                            // 2. This code loads the IFrame Player API code asynchronously.
                                            var tag = document.createElement('script');
    
                                            tag.src = "https://www.youtube.com/iframe_api";
                                            var firstScriptTag = document.getElementsByTagName('script')[0];
                                            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
                                            // 3. This function creates an <iframe> (and YouTube player)
                                            //    after the API code downloads.
                                            var player;
                                            function onYouTubeIframeAPIReady() {
                                                player = new YT.Player('responsive-iframe',
                                                    {
                                                        playerVars: {
                                                            'autoplay': 1,
                                                            'mute': 1,
                                                            'controls': 1,
                                                            'autohide': 1,
                                                            'wmode': 'opaque',
                                                            'showinfo': 0,
                                                            //'loop': 1,
                                                            //'playlist': 'MVqAA9_7gR4'
                                                        },
    
                                                    videoId: 'YFETNJ4uhF0',
                                                    events: {
                                                        'onReady': onPlayerReady,
                                                        'onStateChange': onPlayerStateChange
                                                    }
                                                });
                                            }
    
                                            // 4. The API will call this function when the video player is ready.
                                            function onPlayerReady(event) {
                                                event.target.playVideo();
     
    
                                            }
    
                                            // 5. The API calls this function when the player's state changes.
                                            //    The function indicates that when playing a video (state=1),
                                            //    the player should play for six seconds and then stop.
                                            var done = false;
                                         
                                            function onPlayerStateChange(event) {
                                                if (event.data == YT.PlayerState.PLAYING && !done) {
                                                    setTimeout(stopVideo, 15000);
    //Below is the function to show a timer and i need this function to start along with the video when ajax returns success
                                                            countToShow();
    
                                                    done = true;
                                                }
                                            }
                                            function stopVideo() {
                                                player.stopVideo();
                                            }
                                        </script>
     $.ajax({
                        type: "POST",
                        url: "/Controller/Method",
                        data: '{person: ' + JSON.stringify(person) + '}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            if (response.AdCount <10) {
    
                                document.getElementById('but').style.display = "none";
    
                                  //here i need to play video again along with the function below whenever ajax returns success
                                    countToShow();
                                
                            }

    Wednesday, October 7, 2020 8:08 PM

Answers

  • User-939850651 posted

    Hi Learner94,

    According to your description, I created a simple example using the code you provided, and I modified some of the code to achieve your requirements.

    You could call IFrame Player API playVideo() to continue playing the current video.

    Something like this:

    <head runat="server">
        <script src="Scripts/jquery-3.5.1.min.js"></script>
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div id="player"></div>
                <br /> <br />
                <button type="button" id="continueBtn">Continue</button>
                <br />
                <label id="testLabel"></label>
            </div>
        </form>
    </body>
    <script>
        $('#continueBtn').on('click', function () {
            $.ajax({
                type: "POST",
                url: "Demo.aspx/ajaxFunction",
                data: '',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    //Prove that the ajax call is successful
                    $('#testLabel').text(response.d);
    
                    player.playVideo();
    
                    //if (response.AdCount < 10) {
                    //    document.getElementById('but').style.display = "none";
                    //here i need to play video again along with the function below whenever ajax returns success
                    //countToShow();
                    //}
                }
            });
        });
        // 2. This code loads the IFrame Player API code asynchronously.
        var tag = document.createElement('script');
    
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
        // 3. This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.
        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '390',
                width: '640',
                //videoId: 'M7lc1UVf-VE',
                videoId: 'YFETNJ4uhF0',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }
    
        // 4. The API will call this function when the video player is ready.
        function onPlayerReady(event) {
            event.target.playVideo();
        }
    
        // 5. The API calls this function when the player's state changes.
        //    The function indicates that when playing a video (state=1),
        //    the player should play for six seconds and then stop.
        var done = false;
        function onPlayerStateChange(event) {
            if (event.data == YT.PlayerState.PLAYING && !done) {
                setTimeout(stopVideo, 6000);
                done = true;
            }
        }
        function stopVideo() {
            player.stopVideo();
        }
    </script>
    [WebMethod]
    public static string ajaxFunction() {
       return "this is test value";
    }

    Hope this can help you.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 8, 2020 6:27 AM

All replies

  • User-939850651 posted

    Hi Learner94,

    According to your description, I created a simple example using the code you provided, and I modified some of the code to achieve your requirements.

    You could call IFrame Player API playVideo() to continue playing the current video.

    Something like this:

    <head runat="server">
        <script src="Scripts/jquery-3.5.1.min.js"></script>
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div id="player"></div>
                <br /> <br />
                <button type="button" id="continueBtn">Continue</button>
                <br />
                <label id="testLabel"></label>
            </div>
        </form>
    </body>
    <script>
        $('#continueBtn').on('click', function () {
            $.ajax({
                type: "POST",
                url: "Demo.aspx/ajaxFunction",
                data: '',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    //Prove that the ajax call is successful
                    $('#testLabel').text(response.d);
    
                    player.playVideo();
    
                    //if (response.AdCount < 10) {
                    //    document.getElementById('but').style.display = "none";
                    //here i need to play video again along with the function below whenever ajax returns success
                    //countToShow();
                    //}
                }
            });
        });
        // 2. This code loads the IFrame Player API code asynchronously.
        var tag = document.createElement('script');
    
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
        // 3. This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.
        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '390',
                width: '640',
                //videoId: 'M7lc1UVf-VE',
                videoId: 'YFETNJ4uhF0',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }
    
        // 4. The API will call this function when the video player is ready.
        function onPlayerReady(event) {
            event.target.playVideo();
        }
    
        // 5. The API calls this function when the player's state changes.
        //    The function indicates that when playing a video (state=1),
        //    the player should play for six seconds and then stop.
        var done = false;
        function onPlayerStateChange(event) {
            if (event.data == YT.PlayerState.PLAYING && !done) {
                setTimeout(stopVideo, 6000);
                done = true;
            }
        }
        function stopVideo() {
            player.stopVideo();
        }
    </script>
    [WebMethod]
    public static string ajaxFunction() {
       return "this is test value";
    }

    Hope this can help you.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 8, 2020 6:27 AM
  • User-1257308419 posted

    player.playVideo();
    

    thanks for the help i was wondering why player.playVideo() function wasn't working for me it was because my javascript wasn't in the right place.i just had to place it below and it started working thanks again(y).

    btw is there any way i can make an xml which can load video id's  from this xml and play each of them one by one.

    Thursday, October 8, 2020 6:47 AM
  • User-939850651 posted

    Hi Learner94,

    btw is there any way i can make an xml which can load video id's  from this xml and play each of them one by one.

    You could try to refer to this case below to get the video Ids through Ajax calls, and return the next video id.

    https://stackoverflow.com/questions/44690565/reading-xml-into-list

    Best regards,

    Xudong Peng

    Friday, October 9, 2020 10:16 AM