I have a few html5 videos on a page. When I first enter the page, they load correctly - I can see the correct frame size, play the video etc. etc. After going to another page and ing back to the video page the frames are not high enough and the video doesn't play, doesn't go fullscreen etc.

In my opinion it's something with video loading. I tried using onloadeddata without success (I might have used it wrong though, newbie here).

Is there any way the video can be forced to load? Like a loop checking if the videos are loaded, if not - loading them?

UPDATE: Here's the code.

var content = '';
    var index;
    $.post('api/getVideo.php', {id: id}, function(data) {
    //console.log(data);

        for (index = 0; index < data.length; index++) {
            content = content + '<div class="col-md-6 video-col"> <button id="play" class="full-play-button"><i class="fa fa-play"></i></button>' +
                    '<video id="video1" class="video-small"> <source src="'+data[index]["Path"] + '"type="video/'+data[index]["Typ"]+'" class="video-file"> </video><h3 class="video-title">'+
                    data[index]["Tytul"]+'</h3></div>';
        }
    }, "json");

I have a few html5 videos on a page. When I first enter the page, they load correctly - I can see the correct frame size, play the video etc. etc. After going to another page and ing back to the video page the frames are not high enough and the video doesn't play, doesn't go fullscreen etc.

In my opinion it's something with video loading. I tried using onloadeddata without success (I might have used it wrong though, newbie here).

Is there any way the video can be forced to load? Like a loop checking if the videos are loaded, if not - loading them?

UPDATE: Here's the code.

var content = '';
    var index;
    $.post('api/getVideo.php', {id: id}, function(data) {
    //console.log(data);

        for (index = 0; index < data.length; index++) {
            content = content + '<div class="col-md-6 video-col"> <button id="play" class="full-play-button"><i class="fa fa-play"></i></button>' +
                    '<video id="video1" class="video-small"> <source src="'+data[index]["Path"] + '"type="video/'+data[index]["Typ"]+'" class="video-file"> </video><h3 class="video-title">'+
                    data[index]["Tytul"]+'</h3></div>';
        }
    }, "json");

• javascript
• jquery
• html
• video

• Post updated. Like I said, I tried onloaddata and also tried playing around with checking if readyState === 4 (but again, newbie). – user3691280 Commented Jul 11, 2014 at 8:15
• How did you use onloadeddata ?? That's not jQuery function? – Ashley Medway Commented Jul 11, 2014 at 8:17
• I don't remember exactly now, I tried that yesterday, but it was about going full screen - making video1.play() only onloadeddata to prevent from full screen fireing without video loaded. – user3691280 Commented Jul 11, 2014 at 8:20

3 Answers 3

You might have a typo in your source tag. Try changing '"type="video/' to '"type=video/"'. Modern browsers don't require the type attribute, anymore, so try removing '"type="video/'+data[index]["Typ"]+' pletely. I don't have enough info to test your code, but it looks like a syntax error.

From MediaAPI docs,

The Media API also contains a load() method which: "Causes the element to reset and start selecting and loading a new media resource from scratch." ( Load element causes browser to run media element load algorithm)

You can trigger load while returning back from the new page.

In short this is not fully possible. For short videos you can set the preload attribute to "auto" or the empty string "". This means, that you want the browser to preload the source entirly.

Unfortunatley, in case of long videos, the video isn't fully downloaded by most browsers. In case of mobile browser explicitly iOS. The preload attribute doesn't work. So the way to this look like this:

<video preload="" controls="">
    <source src="my-video.mp4" type="video/mp4" />
    <source src="my-video.webm" type="video/webm" />
</video>