Canvas Support

Issue loading page with html5 videos

3 replies · opened Sep 24, 2018

WWebink74Sep 24, 2018

Hello,

I have an issue on loading pages with html5 videos in it.
In a page, I have 2 videos inside <video> tags, one is only available in mp4, the other one is available in mp4 and webm.
I have already set an attribut data-loader-timeout on this page.
When loading the page in local, everything is fine but on the server, it seems that the browser wait for the videos end up loading in order to display it.
What is strange is that the DOM is loaded because as of the first milliseconds I can see the scrollbar reducing and the code is there in the inspector, then I wait (white page), then the preloader appears, then it fade out and display the page.
Is it possible that the issue come from the missing webm format video?
Doi you have any idea?
Can you let me know what happen?

An other possible cause could be the functions.js file that is loaded asynchronously. Is it possible that the videos loads before this file is loaded/ran ?
In this case, how can load the videos after the functions.js ?

SSemicolon WebSTAFFSep 27, 2018

Hello,

Thanks for your Patience!

  1. We are not sure if the <video> Tags should be causing this (unless they are hosted on an external domain) as they are never completely loaded (206 Partially Loaded and ready to play) on Document Ready. They are loaded completely as they play. The possible reason for this could be the Size of the Video or if there is any Embedded iFrame (again external domain) on the Page.

  2. Missing Video formats will never cause an issue, as long as there's at least 1 format (mp4/webm/ogv) source defined for the Video.

  3. The asynchronous loading of the js/functions.js File is indeed causing the Delayed appearance of the Loader. The Video loads according to the Asset placement in the browser and cannot be deferred after the js/functions.js File.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

WWebink74Sep 28, 2018

Hello,

  1. There is no iframe, the videos are on the server and under the same domain and their sizes are 7mo, 11mo and 17mo. I don't think these sizes are big isn't it?

  2. That's what I was thinking.

  3. About the delayed appearance of the loader caused by the asynchronous loading, the point is that if I remove the <video> tags, everything works fine, I mean, the page loads in 2s with the asynchronous loading.
    By "video loads according the asset placement in the browser", do you mean that if the video is placed, for instance, after 3 css files and 2 pictures in the html, the video will be requested in 6th place?

I just re-made some tests, if I remove both videos, it appears that the page loads normally when there is no <video> tags : between 1s and 2s.
If I remove one or the other one, it takes the same time than if there is both video tags : 19s which is too long.
I have tested your demo page (sections.php) with the exact same code I use (html5 video), it works fine on chrome and firefox, but on IE the section is black with no video.
My page works fine on firefox,it loads normally on IE but doesn't play (just displays the preview image), it plays on Chrome but takes 19s to load.

I need it to work, let me know if you have suggestions.

SSemicolon WebSTAFFOct 4, 2018

Hello,

  1. The sizes appear to be okay, however it is recommended to use as smaller size as possible. Additionally, please make sure that the videos are properly encoded according to web standards for wide acceptability.

  2. That is correct. Video will be at the 6th Position. Additionally, we have just checked that the HTML5 Video in the http://themes.semicolonweb.com/html/canvas/sections.html Page works fine in all Browsers with uniform Load Times.

Can you please provide us with a Live URL so that we can determine the exact cause of the slow loading of your Page. Thanks for your Patience.

Something to note here is that the Page Loading plugin is not currently designed to work asynchronously.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard