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();
}
<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";
}
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.
Member
4 Points
53 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(); }Participant
1280 Points
388 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
Member
4 Points
53 Posts
Re: How to play Youtube video through Youtube IframeApi on ajax success
Oct 08, 2020 06:47 AM|Learner94|LINK
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.
Participant
1280 Points
388 Posts
Re: How to play Youtube video through Youtube IframeApi on ajax success
Oct 09, 2020 10:16 AM|XuDong Peng|LINK
Hi Learner94,
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