CODEWITHSUNDEEP
javascriptjqueryhtmlvideo
user3691280
user3691280

Reputation: 259

How to force a html5 video to load fully?

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 coming 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");

Upvotes: 8

Views: 5881

Answers (3)

JimM
JimM

Reputation: 111

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"]+' completely. I don't have enough info to test your code, but it looks like a syntax error.

Upvotes: 1

alexander farkas
alexander farkas

Reputation: 14134

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>

Upvotes: 0

Midhun Krishna
Midhun Krishna

Reputation: 1759

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.

Upvotes: 0

Related Questions