On a page I have an audio file and saved in a PHP variable is the duration of the audio.
I already know how to pass information to another page via ajax by using a code similar to below:
$.ajax({
url: "www.mydomain.com/passtothispage",
data: {"time":"duration"},
type: 'GET',
contentType: 'application/json; charset=utf-8',
success: function (data) {
$('#divid').html(data);
}
});
What I'm stuck on is how to pass the audio duration PHP variable only when 'PLAY' is pressed.
Thanks!
B
You can use the play event of the video/audio. It is fired "when the audio/video has been started or is no longer paused". Source: http://www.w3schools.com/tags/av_event_play.asp
var vid = document.getElementById("myVideo");
vid.onplay = function() {
alert("The video has started to play");
//then you can use your ajax to send the duration here.
};
To get the duration property, vid.duration using the same vid object specified in the code sample above. Source: http://www.w3schools.com/tags/av_prop_duration.asp
Related
Here's the situation. I have a project where I allow users to upload video. Whenever you click the video a Bootstrap-Modal pops up and the video automatically starts playing. Now I also implemented something where when the video is clicked and that is count as view because when you click the video it automatically starts. Now here is where I messed up, the view is counted when the modal opens up and that's not what I wanted, I wanted the view to be counted when you click the video. I will show you my code below. Can someone kindly help me fix this?
//Video
<video class="video1" id="cx" preload="auto" align="middle" data-
toggle="modal" data-target="#mymodal" data-user-id="{{$usero->id}}"
data-video-src="{{$usero->intro_video}}"
data-video-views="{{$usero->clicks}}" style="
cursor:pointer;"><source src="{{$usero->intro_video}}#t=15" alt="Video
Unavailable" id="" ></source>
//Ajax request
$('#mymodal').on('show.bs.modal show', function (event) {
var button = $(event.relatedTarget);
var user_id = button.data('user-id') ;
var video_src = button.data('video-src');
var video_views = button.data('video-views');
var modal = $(this);
modal.find('#video_source').attr('src', video_src);
modal.find('#video_views').text(video_views);
// send ajax request to increment video count
$.ajax({
method: 'GET',
url: 'getmsg',
dataType: "json",
contentType: "application/json",
data : {
requested_id: user_id
},
success: function(data){
}
});
})
From the code samples you have provided I guess that you have another video tag in your modal, whose src attribute you are updating on show.bs.modal event.
If it the case you should give this video element an id ( video2 for example) and then you can call onplay event on this and you should put you ajax code in this event listner like this
$('#video2').onplay(function(){
$.ajax({
method: 'GET',
url: 'getmsg',
dataType: "json",
contentType: "application/json",
data : {
requested_id: user_id
},
success: function(data){
}
});
});.
In addition you can update the view counts from the success handler of the ajax request if you want.
Hope this will help.
In laravel, Video tag could not play new source video path ajax it always plays with old source video.
After restarting browser it plays video properly.
$('#button').click(function() {
$.ajax({
url: 'url',
type: 'POST',
dataType: 'json',
success: function(data) {
$('video').attr('src', data.newurl);
$('video').get(0).load();
},
});
});
I use this code to store and retrieve ajax data via http://openkeyval.org/
$.ajax({ /* send data */
url: "http://api.openkeyval.org/store/",
data: "test-key-data=" + JSON.stringify([123,456]),
dataType: "jsonp",
success: function(data){
console.log(data);
}
});
$.ajax({ /* retrieve data */
url: "http://api.openkeyval.org/test-key-data",
dataType: "jsonp",
success: function(data){
console.log(data);
}
});
everything work fine in Chrome javascript console but in userscript I get error like this
Uncaught ReferenceError: jQuery110208458673823624849_1375932537303 is
not defined
I try to use GM_xmlhttpRequest to retrieve data like this
GM_xmlhttpRequest({
method: "GET",
url: "http://api.openkeyval.org/test-key-data",
onload: function(response) {
console.log(response.responseText);
}
});
but it seem like openkeyval doesn't accept data via POST/GET method and log result was like when you access it directly from url of browser like this
{"error":"not_found","documentation_url":"http://openkeyval.org/"}
I include jQuery and it work fine with this code
// #require http://code.jquery.com/jquery-latest.min.js
I try to use Greasemonkey/jQuery XHR bridge with out change other code by like this
// #require http://courses.ischool.berkeley.edu/i290-4/f09/resources/gm_jq_xhr.js
and try use openkeyval official javascript library with code like this
// #require http://cdn.openkeyval.org/statics/openkeyval.packed.js
and retrieve data with code like this
var ourCallback = function(value, key) {
console('The value of ' + key ' + is ' + value);
};
window.remoteStorage.getItem('test-key-data', ourCallback);
still got error ERROR: Unexpected string
Please help, I mess with it more than 10 hours. Thank you so much.
It look like $.ajax always trigger error event function
but GM_xmlhttpRequest can retrieve mistype data, so I try looking for dataType: "jsonp" in GM_xmlhttpRequest and I got that jsonp header content-type is "application/javascript" OR "application/json" and the first one work well.
my new code for retrieve data look like this
GM_xmlhttpRequest({
method: "GET",
url: "http://api.openkeyval.org/test-key-data?nocache=" + new Date(),
headers: {
"Content-Type": "application/javascript"
},
onload: function(response) {
console.log(response.responseText);
}
});
and retrieve data using $.ajax even it always trigger error event function but it still send data.
I try both content-type on GM_xmlhttpRequest and still not work.
my code to store data look like this
$.ajax({ /* send data */
url: "http://api.openkeyval.org/store/",
data: "test-key-data=" + JSON.stringify(myVarObject),
dataType: "jsonp"
});
Add this into $.ajax({...})
crossDomain: true;
It is because by default cross domain ability is disabled. See http://api.jquery.com/jQuery.ajax/
EDIT:
Sometimes there will be a issue with different charset between local script and remote script. Try using:
scriptCharset: "utf-8";
Also look at JQuery AJAX is not sending UTF-8 to my server, only in IE
Elaborating my comment
The reference is to the callback function generated by jquery.
It Sounds to me the way you invoke your userscript unloads the jquery functions before the callback is executed.
Perhaps you use a link and forgot the preventDefault?
If you ajax and have
$("#linkid").on("click"
or
$("#formid").on("submit"
it is MANDATORY to continue like this:
,function(e) {
e.preventDefault();
Otherwise the link is followed or the form is submitted which may not have any visible effect, but the asynchronous scripts have been (partially) unloaded unless the form and link has a target other than the current window
I am trying to use the response from a jQuery ajax request to set the innerHTML of a div with a certain id. This is the code I am using:
$(".show_comments").click(function(){
var articleName = $(this).closest("article").find(".articlename").attr('id')
$.ajax({
url: "commentView.php",
data: { 'articleName': articleName },
cache: false,
dataType: "html", // so that it will auto parse it as html
success: function(response){
$(this).closest("article").find(".comments").html(response);
}
});
however it doesn't seem to be doing anything at all, I've tried googling around, but everything I can find says to do it the way I am doing it... I have tested in Firebug and the ajax request is giving me the exact response I want it too... But I just cant access this to set the innerHTML of the div to the response!
In your ajax success handler there is another scope and this points to not what you think. So change your code to:
var articleName = $(this).closest("article").find(".articlename").attr('id'),
that = this;
$.ajax({
url: "commentView.php",
data: { 'articleName': articleName },
cache: false,
dataType: "html", // so that it will auto parse it as html
success: function(response){
$(that).closest("article").find(".comments").html(response);
}
});
What I've changed: I added that variable that points to this instance and use it in the success handler instead.
How would you debug it yourself: if you tried to output console.log(this) and console.log($(this).closest("article").find(".comments")); you would see that it returns a wrong object (in first case) and nothing in second.
I have a simple click function with the code below, but I can't seem to get the data on the first click.
$.ajax({
type: 'POST',
url: 'test/get/1',
success: function (result) { testit = result; },
dataType: 'json',
data: 'js=1'
});
alert(testit);
In my callback function I simply have return drupal_json('hello'); but it doesn't show up until the 2nd time around. For example, if I click the button, nothing will happen, but if I click it again, it will alert 'hello'. In a case where there is dynamic data, then it will also be delayed by one click. For example, let's say clicking the first time should alert 1, 2nd time should alert 2, and so on. Instead, the first click will do nothing, the 2nd click will alert 1, the 3rd click will alert 2, etc. Any ideas why that is happening? Thanks.
the a in ajax stands for asynchronous. therefore, testit will not be set to the result of the ajax's response until the success: function is called (when the ajax call is successfully completed)
$.ajax({
type: 'POST',
url: 'test/get/1',
success: function (result) { testit = result; alert(testit); },
dataType: 'json',
data: 'js=1'
});
if you'd like it to work synchronously, you can also set aysnc:false in jQuery's .ajax options, like so:
var testit = $.ajax({
type: 'POST',
async: false,
url: 'test/get/1',
dataType: 'json',
data: 'js=1'
}).responseText;
alert(testit);
in the second method, ALL javascript will be delayed until the ajax call is complete (usually noticeably slow). I'd recommend just doing your code in the success: callback from the first example. however, you may want to create an error: callback, too, just in case something fails (otherwise your callback may NEVER get called, because there was no success).
This is probably happening because the AJAX request doesn't block the script. It goes ahead and makes the request, but doesn't wait for the results to come back before it executes the next line (your alert). Thus the first time it hits the alert no data has been fetched, the second time it only has the data from the first request (the second request has started, but not finished), and so on.
The solution is to put the alert in your callback function, which doesn't get executed until after the response has been received:
$.ajax({
type: 'POST',
url: 'test/get/1',
success: function (result) { alert(result); },
dataType: 'json',
data: 'js=1'
});