jquery - Javascript onloadedmetadata event not firing on iOS devices - Stack Overflow

admin管理员组

文章数量:1344319

Part of my current project involves loading external videos through HTML5's native video tag and then resizing them with Javascript to be the full height & width of the DOM.

My code seems to work perfectly on desktop browsers, but when I load up my project on my ipad the video doesn't get resized because the onloadedmetadata event never gets fired.

Here is a small code sample which 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=".webm" type='video/webm' />
    <source src=".mp4" type="video/mp4" />
</video>

/

I've even tried coding up a solution using jQuery, on the off-chance that the event may fire, but it still doesn't.

$('#viddy').on('loadedmetadata', function() {
   alert('test');
});

I even went as far as enabling remote debugging through safari on my ipad, but still no output within the console.

Are there any workarounds to this? I couldn't find much info about this on the web / in documentation.

Part of my current project involves loading external videos through HTML5's native video tag and then resizing them with Javascript to be the full height & width of the DOM.

My code seems to work perfectly on desktop browsers, but when I load up my project on my ipad the video doesn't get resized because the onloadedmetadata event never gets fired.

Here is a small code sample which 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/2010/05/sintel/trailer.webm" type='video/webm' />
    <source src="http://www.w3schools./html/movie.mp4" type="video/mp4" />
</video>

http://jsfiddle/AUSNu/213/

I've even tried coding up a solution using jQuery, on the off-chance that the event may fire, but it still doesn't.

$('#viddy').on('loadedmetadata', function() {
   alert('test');
});

I even went as far as enabling remote debugging through safari on my ipad, but still no output within the console.

Are there any workarounds to this? I couldn't find much info about this on the web / in documentation.

• javascript
• jquery
• ios
• html
• html5-video

Share Improve this question Follow edited Jan 17, 2014 at 16:10 Joel Murphy asked Jan 17, 2014 at 15:44 Joel MurphyJoel Murphy 2,51233 gold badges3131 silver badges4848 bronze badges 1

• Update: The jsfiddle works on Android too. Is this a bug in iOS? – Joel Murphy Commented Jan 17, 2014 at 15:53

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Unfortunately, there isn't really a way around this. Mobile Safari will not download any part of the video file until it gets a user interaction (i.e. some kind of touch event), not even the header, which is required to know the dimensions.

In your specific example, you need to enable controls on the video so the user can start it playing. (Or you can write your own code that starts it, but it has to be triggered by a touch or click event.) Once it starts playing, the loadedmetadata even will fire, and you can do what you want.

I remend reading this other answer where someone else was trying to do pretty much the same thing. It discusses the problem in more detail along with a working link. Also, it addresses another problem with scaling the video that you will probably run into.

Safari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width

本文标签： jqueryJavascript onloadedmetadata event not firing on iOS devicesStack Overflow