Menu
I am having trouble with videojs: when attaching an eventlistener to the "loadedmetadata" event, the callback function is never executed.
The best explanation I found seems to be that some events may fire before Video.js binds the event listeners: Video.js - loadeddata event never fires.
Unfortunately, the solution proposed in this post does not seem to work for me.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
function init() {
var video = document.getElementById('myVideo');
video.addEventListener("loadedmetadata", function () {
alert("test");
});
}
window.addEventListener("load", init);
</script>
</head>
<body>
<video id='myVideo' class="video-js vjs-default-skin" controls data-setup='{}'>
<source id='mp4' src="https://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4'>
<source id='webm' src="https://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm'>
</video>
</body>
</html>
When I launch it from Visual Studio (2013), the code above produces an alert pop up only in IE(11); it does not work with Firefox nor Chrome.
When I publish it on my website it never works. What am I missing? Thank you for reading!
965
asked Oct 16 '25 17:10
As misterben said, use the .on method. But put it in the ready callback or it will not work:
var player = videojs('myVideo');
player.ready(function(){
this.on('loadedmetadata', function(){ alert('lmd'); })
});
Source: just figured this out myself. I know misterben has mentioned using the ready callback but you may not have known that you need to use it.
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
