Данная статья является переводом с дополнениями поста
css-tricks.com/how-to-use-the-webshims-polyfill
В этой статье речь пойдет о HTML5 polyfill библиотеке под названием
Webshims и о ее правильном использовании.
В веб-разработке polyfill'ами, называются скрипты, частично эмулирующие спецификации HTML5 или CSS3. В качестве polyfill'a может выступать практически что угодно — библиотека на JavaScript, которая добавляет поддержку CSS3 селекторов в старых версиях Internet Explorer (например,
Selectivizr), или высококлассное решение на базе технологии Flash для поддержки тегов
и
Современные браузеры отобразят это видео правильно, но Internet Explorer 6, 7 или 8 — нет.
Теперь мы добавим в пример библиотеку webshims. Заметьте, что это не нужно редактировать что-либо еще в коде.
<!DOCTYPE html>
<html>
<head>
<title>Video including polyfill</title>
<script src="scripts/jquery-1.8.2.min.js"></script>
<script src="scripts/modernizr-custom.js"></script>
<script src="scripts/webshim/polyfiller.js"></script>
<script>
$.webshims.polyfill('mediaelement');
</script>
</head>
<body>
<video width="480" height="360" controls="controls">
<source src="Video.mp4" type="video/mp4">
<source src="Video.webm" type="video/webm">
</video>
</body>
</html>
Современные браузеры будут использовать встренную поддержку тега
