BusEngine.js

BusEngine.polyfillTagSource (Object)

Объект отвечающий за работу атрибута "media" в html-теге "source" тега "video".

Методы

Метод уровня BusEngine не принимает никаких параметров. Можно запускать когда необходимо, но после отрисовки тегов "video".

Наверх

Подклассы

Подклассов нет

Константы

Констант нет

Поля

Полей нет

Свойства

Свойств нет

События

Событий нет

Пример файла index.html

В коде отражён запуск видео в зависимости от браузера и разрешения монитора после полной загрузки страницы.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="Scripts/BusEngine/BusEngine.js" type="text/javascript"></script>
<style type="text/css">
body picture img,
body video {
position: absolute;
object-fit: cover;
width:100%;
height:100%;
top: 50%;
left: 50%;
z-index: -1;
transform: translate(-50%, -50%);
background-repeat: no-repeat;
background-size: cover;
background-position-x: center;
background-position-y: center;
}
</style>
<script type="text/javascript">
if ('matchMedia' in window && window.navigator.userAgent.toLowerCase().match(/(chrome|busengine)\/(\d+\.)/)) {
window.addEventListener('load', function() {
BusEngine.polyfillTagSource();
});
}
</script>
</head>
<body>
<picture>
<source srcset="Textures/background_login_1280x720.png" type="image/png" media="screen and (max-device-width:1280px)">
<source srcset="Textures/background_login_1920x1080.png" type="image/png" media="screen and (min-device-width:1281px)">
<img loading="eager" decoding="sync" srcset="Textures/background_login_1280x720.png" alt="background_login" sizes="(max-device-width:1280px) 100px">
</picture>
<video autoplay="autoplay" preload="none" muted="false" loop="true">
<source data-src="Videos/background_login_1280x720.mp4" type="video/mp4" media="screen and (max-device-width:1280px)">
<source data-src="Videos/background_login_1280x720.webm" type="video/webm" media="screen and (max-device-width:1280px)">
<source data-src="Videos/background_login_1920x1080.mp4" type="video/mp4" media="screen and (min-device-width:1281px)">
<source data-src="Videos/background_login_1920x1080.webm" type="video/webm" media="screen and (min-device-width:1281px)">
</video>
</body>
</html>

Наверх