We are excited to announce that the ASP.NET Forums are moving to the new Microsoft Q&A experience. Learn more >

How to play Youtube video through Youtube IframeApi on ajax success[Answered] RSS

3 replies

Last post Oct 09, 2020 10:16 AM by XuDong Peng

‹ Previous Thread|Next Thread ›

Shortcuts

Learner94

Member

5 Points

58 Posts

How to play Youtube video through Youtube IframeApi on ajax success

Oct 07, 2020 08:08 PM|Learner94|LINK

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();
                            
                        }

XuDong Peng

Contributor

2400 Points

749 Posts

Re: How to play Youtube video through Youtube IframeApi on ajax success

Oct 08, 2020 06:27 AM|XuDong Peng|LINK

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

ASP.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >

- Reply
Learner94
Member

5 Points

58 Posts
Re: How to play Youtube video through Youtube IframeApi on ajax success

Oct 08, 2020 06:47 AM|Learner94|LINK
XuDong Peng
```
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.
- Reply
XuDong Peng
Contributor

2400 Points

749 Posts

Re: How to play Youtube video through Youtube IframeApi on ajax success

Oct 09, 2020 10:16 AM|XuDong Peng|LINK

Hi Learner94,

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

ASP.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >

‹ Previous Thread|Next Thread ›