CODEWITHSUNDEEP
jquerygoogle-chromehtml5-video
Jack Trowbridge
Jack Trowbridge

Reputation: 3251

Chrome Won't Load HTML5 Videos

I have a training website full of videos with a jquery navigation bar.

All videos with text descriptions are loaded within there own div tags.

All div tags are made hidden through display: none; and when a user clicks on a section of the jquery navigation the cosponsoring div tag is displayed through display: block;

My whole system works great In FireFox, Safari and Internet Explorer.

However chrome just keeps processing the page and doesn't stop. As well as this the second half of videos in my HTML are just not being playable at all.

Every other browser loads the page immediately and the navigation works perfectly to see all the videos available.

HTML5 videos are being displayed with code like below:

            <video id="video" width="100%" height="auto" controls>

                <source src="6-steps-to-becoming-an-elite-internet-marketer/_/video/mp4/part-4-2-effgijfrcx.mp4" type="video/mp4">
                <source src="6-steps-to-becoming-an-elite-internet-marketer/_/video/ogv/part-4-2-effgijfrcx.ogv" type="video/ogg">

                Oppps! Your browser appears to not be able to play this video. Please update it!

            </video>

Upvotes: 0

Views: 2238

Answers (1)

brianchirls
brianchirls

Reputation: 7853

This behavior is pretty typical of Chrome. Chrome is trying to load all 15 videos at the same time, but it only allows itself so many simultaneous open connections to the server. It has no way of knowing which videos to prioritize.

I suggest adding preload="metadata" to all of your video tags. When a given video becomes visible, you can call .load() on it to start buffering. Or just begin playing it.

I have a more detailed explanation in a case study that faced the same problem: http://www.pbs.org/pov/blog/povdocs/2014/09/empire-case-study-part-1/

You may still run into problems if the user starts revealing many videos in rapid succession. In that case, you may want to force hidden videos to stop buffering by setting src to empty string and then calling .load(). You'll have to set the src again when that video is revealed again.

Upvotes: 1

Related Questions