I'm currently using Video JS to serve video files, and the video source is changing depending on what item the visitor clicks. When my page loads I run the following code to bind the videoplayer object to a variable.

var videoPlayer = _V_("my_video_1");

This works perfectly in every browser except for IE7 and IE8. I've been debugging my code and it seems like it gets stuck on the ready event, which never fires. Although it does not leave any errors in the console. But any alerts or actions inside the ready function are ignored, and it's really at that point that the source is being modified. This is the code I use to change the source:

videoPlayer.ready(function(){
    var myPlayer = this;
    myPlayer.src([
        { type: "video/mp4", src: videoFile + ".mp4" },
        { type: "video/ogg", src: videoFile + ".ogv" }
    ]);
    myPlayer.play();
    myPlayer.volume(0.2);
    $('div#videoViewer').show();
});

I've been using the same code on two other pages, and there have been no issues getting this to work. Now both myself and a colleague have been debugging this for hours but e nowhere closer to a solution.

Does anyone here have any ideas what could be causing the ready event to be ignored? I've been trying to disable all other scripts in order to find the root of the issue but it has not been working.

I'm very thankful for any answers that could help me fix this.

I'm currently using Video JS to serve video files, and the video source is changing depending on what item the visitor clicks. When my page loads I run the following code to bind the videoplayer object to a variable.

var videoPlayer = _V_("my_video_1");

This works perfectly in every browser except for IE7 and IE8. I've been debugging my code and it seems like it gets stuck on the ready event, which never fires. Although it does not leave any errors in the console. But any alerts or actions inside the ready function are ignored, and it's really at that point that the source is being modified. This is the code I use to change the source:

videoPlayer.ready(function(){
    var myPlayer = this;
    myPlayer.src([
        { type: "video/mp4", src: videoFile + ".mp4" },
        { type: "video/ogg", src: videoFile + ".ogv" }
    ]);
    myPlayer.play();
    myPlayer.volume(0.2);
    $('div#videoViewer').show();
});

I've been using the same code on two other pages, and there have been no issues getting this to work. Now both myself and a colleague have been debugging this for hours but e nowhere closer to a solution.

Does anyone here have any ideas what could be causing the ready event to be ignored? I've been trying to disable all other scripts in order to find the root of the issue but it has not been working.

I'm very thankful for any answers that could help me fix this.

• javascript
• html
• internet-explorer-8
• html5-video
• dom-events

Share Improve this question Follow edited Jul 20, 2020 at 15:45 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 4, 2012 at 8:33 JonathanJonathan 79433 gold badges1111 silver badges2424 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I had the same problem. In my case, the ready event wouldn't fire in IE8 because I had a wrapper div that was set to display:none. If the wrapper was visible, the ready event would fire as expected. This problem did not occur in IE9.

I had the same problem, my solution was to directly pass the DOM element instead the id to videojs function.

//having this
<video id="VIDEO" ....>

//this fails
videojs('VIDEO').ready(...)

// this works!!
videojs(document.getElementById('VIDEO')).ready(...)

Hope it helps :D