Мне указали на одну странность: очень простой код отображается ожидаемо в GoogleChrome и странно Firefox.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test video page</title>
<style>
#test-container{
display: flex;
}
</style>
</head>
<body>
<div id="test-container">
<p class="big-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere eaque adipisci voluptatibus odit numquam, similique maiores possimus enim repellendus rerum porro excepturi odio quod quae explicabo natus, laudantium harum officiis! Cum, cumque! Veniam non quaerat rem dignissimos sint, debitis iure hic vel labore repellendus quibusdam omnis ipsa iusto placeat, doloremque fugit? Culpa, quis? Molestias nulla delectus aperiam corrupti reiciendis? Harum quo nobis placeat veniam distinctio sapiente, repudiandae, quia officia soluta nostrum ut enim, corporis dolorum minima inventore esse magni non mollitia? Vel quaerat, mollitia soluta ut laborum atque? Expedita a excepturi eum architecto necessitatibus. Voluptatem obcaecati placeat labore laudantium quos eveniet pariatur quia eos veniam nobis repellat doloremque reiciendis libero sapiente ratione, provident voluptates reprehenderit consectetur repudiandae earum aut natus dicta dolore! Quod expedita repellat vel quae, maiores ipsa, esse, iure suscipit vitae sequi voluptates quibusdam eveniet? Temporibus magnam dolores corrupti sequi nisi fuga accusantium, debitis, ipsam doloremque exercitationem voluptatibus similique sint pariatur! Omnis exercitationem, sequi repudiandae, consequuntur accusantium veniam tempore tenetur ducimus perspiciatis tempora harum voluptatibus a fugiat mollitia commodi, dolorem quam. Nostrum, ad. Blanditiis, non ex voluptatibus suscipit, facere voluptatum deserunt repellendus earum labore repellat dolore temporibus! Eum, mollitia nemo. Nisi iure unde reprehenderit doloribus soluta, necessitatibus fugit!</p>
<video width="500" src="./Forest - 49981.mp4"></video>
</div>
</body>
</html>
Первая же идея — придется «завернуть» видео в div. И это работает, но я стала искать информацию, и нашла скриншоты YouTube 2016 года с той же проблемой, хоть и не так выражено. Ссылка на это обсуждение.
Логично было проверить, как YouTube чувствует себя сейчас, и… там все отлично. Тэг <video> «завернут» в <div>:
И тут бы все закончилось, но на странице YouTube море тэгов вида <ytd-всякое-разное>, выглядит странно. Для новичка просто что-то невозможное. Браузер понимает тэг которого нет в стандарте???
Технология называется Custom Elements, что логично. Суть заключается в том, что мы можем создавать свои элементы (тэги) при помощи JS. Самое интересное было найти первую статью на эту тему по сбивчивым описаниям с общим смыслом: «а чё за ytd тэги?».
Так нашлась статья про нулевую версию от 2013года. По ней удалось создать элемент. Неприлично много радости, но всё же. Технологию придумали для развития семантической верстки. Так можно создать теги подходящие именно к данному проекту. Как на YouTube есть <yt-playlist-manager> — тэг нужный только в этом проекте, но используемый многократно. Если бы это был <div> с набором классов было бы сложнее читать код.
Один из примеров из этой статьи я запустила с небольшими изменениями. Добавила текст в элемент, чтобы на странице можно было увидеть результат, и добавила использование метода foo() опять же для проверки.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tags</title>
</head>
<body>
<script>
var XFooProto = Object.create(HTMLElement.prototype);
// 1. Give x-foo a foo() method.
XFooProto.foo = function () {
alert('foo() called');
};
// 2. Define a property read-only "bar".
Object.defineProperty(XFooProto, "bar", {
value: 5
});
// 3. Register x-foo's definition.
var XFoo = document.registerElement('x-foo', {
prototype: XFooProto
});
// 4. Instantiate an x-foo.
var xfoo = document.createElement('x-foo');
xfoo.innerHTML="xfoo text";
xfoo.id="xfoo-element";
// 5. Add it to the page.
document.body.appendChild(xfoo);
document.getElementById("xfoo-element").foo();
</script>
</body>
</html>При втором менее удивленном прочтении я увидела первый абзац… Да, конечно, кто же читает предупреждения крупным красным шрифтом? Не я.
Ок. Читаем про новый вариант на developers.google.com. Тут все тоже очень хорошо расписано и уже можно расслабиться и почитать по-русски. Простенький пример из этой версии я тоже попробовала. Небольшие правки и он тоже работает.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="test"></div>
<script>
window.customElements.define('x-foo-with-markup', class extends HTMLElement {
connectedCallback() {
this.innerHTML = "<b>I'm an x-foo-with-markup!</b>";
}
});
</script>
<x-foo-with-markup></x-foo-with-markup>
</body>
</html>Я не ставила цели узнать все о кастомных тэгах. Только узнать что это, и зачем. Считаю этого достаточно для первого знакомства.
