Part of my current project involves uploading external videos through my own HTML5 video tag, and then resizing them using Javascript for the full height and width of the DOM.
My code works fine on desktop browsers, but when I upload my project to my ipad, the video does not change because the event onloadedmetadatanever fires.
Here is a small example code that reproduces the problem:
function init() {
var video = document.getElementById('viddy');
video.addEventListener('loadedmetadata', function(e){
var dimensions = [video.videoWidth, video.videoHeight];
alert(dimensions);
});
}
document.addEventListener("DOMContentLoaded", init, false);
<video id="viddy" autoplay>
<source src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm' />
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" />
</video>
http://jsfiddle.net/AUSNu/213/
I even tried to code the solution using jQuery, no matter what the event might fire, but it still doesn't work.
$('#viddy').on('loadedmetadata', function() {
alert('test');
});
I even turned on remote debugging via safari on my ipad, but still did not output to the console.
? / .