Introduction
This is not a big surprise : Internet Explorer 11 needs a little help to fully understand what we ask him for here...
To avoid that he does not feel uncomfortable when he meets our class, we have to explain the folowing concepts to him :
Object.assign(),
Array.find(),
Array.from(),
Array.includes(),
Weakset,
ChildNode.remove()
and CustomEvent().
To carry out this arduous task, several solutions are available to you :
- Use the dedicaced amstramgramMediaPlayerPolyfill.js file located in the dist folder.
- Work with polyfill.io
- Build your own cocktail...
It is a somewhat brutal method but nevertheless effective : just insert in your HTML head tag the folowing lines.
HTML
<script>
if (typeof Object.assign !== 'function' ||
!Array.from ||
!Array.prototype.includes ||
!Array.prototype.find ||
!('remove' in Element.prototype) ||
typeof window.CustomEvent !== "function" ||
typeof window.WeakSet !== "function"
){
var d = document,
s = d.createElement('script');
s.async = "false";
s.src = "js/amstramgramMediaPlayerPolyfill.min.js";
d.head.appendChild(s);
}
</script>
If the browser doesn't implement some of the necessary methods listed above, it will load the polyfill script.
The downside is that, if you're using other libraries that already polyfill some of the needed methods, it will duplicate work.
But, if you are not sure, this is the method you should choose.
polyfill.io
As you can read on its Github Repo, Polyfill.io is a service which makes web development less frustrating by selectively polyfilling just what the browser needs. Polyfill.io reads the User-Agent header of each request and returns polyfills that are suitable for the requesting browser.
Unlike the previous method, the downside is that the browser makes a request whether or not it needs some polyfills.
Furtherwise, the script bundled this way weights 8.62 Ko against 2.87 Ko for our amstramgramMediaPlayerPolyfill.
Anyway, If you opt for this solution, you just have to insert the folowing line in your HTML head tag :
HTML
<script src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CArray.prototype.find%2CArray.from%2CArray.prototype.includes%2CWeakSet%2CElement.prototype.remove%2CCustomEvent"></script>
You can see here a copy of the Home page using the polyfill.io script.