0

We're experiencing issues with MP4 video in HTML5 video elements on IE and Edge. The problem seems to occur when there are many videos on the page. This happens on a number of different machines, but is more likely and frequent on machines with lower-end specs, video cards, etc.

Artifacted at start

Clear after first keyframe

In the first screenshot is how the videos sometimes appear after they first start playing, they are artifacted and dark, then after the videos play for a second (after they hit first keyframe, they correct themselves and continue playing with normal appearance.)

Our video tags look like:

<video loop="" playsinline="" muted="" poster="/assets/img/minigames/thumb-us-23.976.jpg" preload="none">
    <source type="video/mp4" src="/assets/video/mini-us-23.976.mp4">
</video>

We're testing on Internet Explorer version 11.228.17134.0 and Edge version 42.17134.1.0, both currently the latest.

From a few threads, I've gathered that this is a long-standing issue, and it appears to me currently that there is no workaround from a developer standpoint, other than reducing the number of videos on the page. This does appear to be a problem with memory management in IE/Edge.

I didn't find similar issues on SO, but found a few that seem related around the web:

https://social.technet.microsoft.com/Forums/ie/en-US/16eed8cc-b127-4f96-9a1a-ba9ff23a6416/ie-11-h264-playback-artifacts?forum=w7itpromedia

https://answers.microsoft.com/en-us/edge/forum/edge_other-edge_win10/video-artifacts-edge-browser-windows-10/99fbfd45-a4d0-4260-be2a-3aa16581caf8

https://answers.microsoft.com/en-us/edge/forum/edge_other-edge_win10/youtube-and-video-issues-on-microsoft-edge-and-ie/6134bd89-1e1e-4a6a-92df-17f3f4ce0a66

There are a lot of suggestions to disable GPU acceleration, enable VP9 video, enable Flash Player, update firmware, and such... But these don't affect anything for us, and aren't a solution for our site anyways.

It does not appear that Microsoft wants to acknowledge this, fix it, or flag it as a known issue.

This is absolutely unacceptable for our client, and it doesn't appear like there is any solution but delivering our video in Flash which Microsoft will phase out completely by late 2020.

Here is a post we made related to this issue: Video, memory management problems in Internet Explorer and Edge from many videos on page causing them to display dark/black and/or not play. I need to update the question to specifically regard a related issue where the videos in this scenario do not recover and begin to play normally like they do now that we have implemented the solution. The confusion was that there were two separate issues, and until yesterday we hadn't identified that they were distinct. The other one is solved, and this one remains a problem.

BBaysinger
  • 6,614
  • 13
  • 63
  • 132
  • 1
    does this only occur in Windows with IE/Edge, or does it also happen with Chrome/Firefox (on Win/macOS) or Safari as well? Do you have a sample/test page where we can see this issue? Have you tried forcing extra keyframes at the beginning (and I assume with MP4 you've got the MOOV atom at the start?) – Offbeatmammal Sep 06 '18 at 00:16
  • I will look tomorrow, and see what else I can provide you. I was wondering if there is way to force extra keyframes at the start of the video. We're using Adobe Media Encoder CC 2018. – BBaysinger Sep 06 '18 at 00:18
  • 1
    I use ffmpeg - see https://stackoverflow.com/questions/51995276/insert-keyframe-into-m4v-mp4-at-specific-times/52013433#52013433, also see the movflags option eg https://stackoverflow.com/questions/50671723/chrome-and-safari-html5-video-rendering-hanging-on-first-frame/50672639#50672639 – Offbeatmammal Sep 06 '18 at 00:19
  • If this happens only when a lot of videos are being displayed, you could limit this number, or even hide the ones that are not in the current viewPort. – Kaiido Sep 06 '18 at 06:28
  • @Kaiido That is one solution we have implemented. I updated my post with a link to that I forgot to add. We will be implementing another variance that depopulates videos on mouse-out; however, this removes a feature where the moused-out videos appear to remain paused on the frame the vid was moused out on. – BBaysinger Sep 06 '18 at 15:59

1 Answers1

0

Based on my search, I find that you can use software rendering instead of gpu rendering and also disable the smart screen filter.

Further, you can try to disable Adblock extension and again try to check whether it solves your issue or not.

also low memory can cause this issue.

Regards

Deepak

Deepak-MSFT
  • 10,379
  • 1
  • 12
  • 19
  • As I mentioned, solutions like this aren't applicable from a development standpoint. We can't ask our site views to go through steps to view our site. – BBaysinger Sep 06 '18 at 15:55
  • Although these things can be valuable in developing an understanding of the problem. I'm not sure it would lead us to a solution though. – BBaysinger Sep 06 '18 at 16:06
  • What does the performance tab of f12 say? How long does your page take to load? Consider a different design pattern, using video poster attributes. 3 seconds is considered the optimal time for a landing page to load.Are you using third-party video element frameworks? – Rob Parsons Sep 07 '18 at 02:00