I'm trying to perform a function when I finish loading the oncanplay but when I put a document.ready I get ReferenceError: loaderVideo is not defined
HTML
<video src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" oncanplay="loaderVideo();"></video>
$(document).on("ready", function() {
function loaderVideo() {
$('.big-icon').fadeIn(1000);
$('.loader').fadeOut(500);
}
}); It's a matter of scope of the functions. To make your code work, you must declare loaderVideo outside the scope of document.ready and call it from within. This will cause the function to be called after loading the DOM.
That will not prevent you from accessing the DOM elements from loaderVideo , as you can see in the test code.
By the way, the recommendation is to use function instead of document.ready , declared obsolete since jQuery 3.
$(function() {
loaderVideo();
});
function loaderVideo() {
/*Prueba de que se puede acceder a los elementos del DOM*/
var testVal=$('#test').val();
alert("Me has llamado :-) El input en el DOM tiene el valor: "+testVal);
//$('.big-icon').fadeIn(1000);
//$('.loader').fadeOut(500);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test" value="input test" />To be able to use it within document.ready you should do something like this (less elegant).
$(function() {
window.loaderVideo = function loaderVideo(msg) {
alert(msg);
}
loaderVideo("Me has llamado :-(");
alert("Más código");
loaderVideo("Me llamaste de nuevo");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>