Support Center Visit Demo License manager Buy @ envato

Google Chrome warping background loop mp4 videos (known fix)

humanismhumanism
in Theme support
So, Google Chrome has really bad performance on .mp4 videos, warping all over the place even if the video is the only thing on the page. This happens on both Nvidia and AMD graphics cards on Windows 10.

To work around this, I had to input an .ogv file into the .mp4 field for the background videos. This means the mime-type on these videos is wrong. I tried to leave the .mp4 field blank, but BeTheme removes the entire video section from the HTML code if the .mp4 field is blank (even if the .ogv field is filled out). However, this means that Edge can't play the video at all as it doesn't support .ogv.

This could be fixed in BeTheme by simply placing the .ogv video tag above the .mp4 video tag, so that chrome sees the .ogv video, recognizes it can play this video type, and ignores the .mp4 video type. This is because the way HTML5 video standard is written, a browser will play the first video file in the block it supports. Because Chrome sucks so bad at .mp4 videos and BeTheme lists the MP4 video first, Chrome will always choose the MP4 instead of the .ogv.


Comments

  • humanismhumanism
    edited March 2018
    For example, to make this work much better in Chrome BeTheme just needs to adjust the video source code from this:
    <video poster="backgroundimage.jpg" autoplay="true" loop="true" muted="muted"><sourcetype="video/mp4" src="video.mp4"/><sourcetype="video/ogg" src="video.ogv"></video>

    To this:
    <video poster="backgroundimage.jpg" autoplay="true" loop="true" muted="muted"><sourcetype="video/ogg" src="video.ogv"><sourcetype="video/mp4" src="video.mp4"/></video>

    This could also be fixed by adding an option to BeTheme to be able to insert a .webm video link, which Edge does now support.
    Edit: It looks like Edge doesn't actually support WebM in this format...

    For an example of the horrible time warp and jerkyness of MP4 in Chrome (even when running a Nvidia GTX 1070 or a AMD Radeon 5950), see:


    vs.


  • BryanBryan
    Hi,
    sorry but there is nothing we can do about it. We cannot add webm because not all browsers do support it. The mp4 video plays the same as the webm so we do not see where is the problem exactly.
    It does not warp or anything. ave you tried on other PCs?
    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • humanismhumanism
    edited March 2018
    I've tried this on two vastly different PCs. One is an Intel i5-3750 CPU with an AMD Radeon 7950 graphics card. One is an AMD FX-4100 CPU with an Nvidia GTX1070 graphics card. This happens in both Chrome and Chromium on Windows 10 Pro Fall Creator's Update.

    All that's needed is to switch the order of the video embed tags so that .ogv is first. Also it's obvious that the entire video embed section shouldn't be left out if there's an .ogv video url specified but no .mp4 video url specified in the BeTheme section options. Currently my page has invalid mime-types due to having to actually put a .ogv video into the mp4 section to work around this BeTheme bug. This means there is no mp4 linked, so Edge doesn't display the video at all.

    The HTML5 standard says browser will choose which video to play from list of <sourcetype> tags based on what it supports. Putting .ogv video first (if url exists) will make this work on all browsers. There's no need for .webm support.
  • BryanBryan
    Sorry but we do not know why is it jittering for you, maybe it is just a browser issue. We cannot do anything about that really. There are no complaints about this from anybody.
    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.