Как создать элемент Video с помощью JavaScript
Здравствуйте! В сегодняшней статье мы рассмотрим как добавить видео элемент на HTML страницу средствами языка JavaScript.
Чтобы создать видеоэлемент:
-
Используем document.createElement() метод для создания video элемента.
-
Установим src атрибут элемента на локальный или удаленный видеофайл.
-
Добавим элемент на страницу, используя метод appendChild().
Подробнее о том как добавлять и удалять элементы на HTML-странице можно найти в видеокурсе Программирование на JavaScript с Нуля до Гуру 2.0
html код
<!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="box"></div>
<script src="index.js"></script>
</body>
</html>
соответствующий код JavaScript.
// Создаем элемент видео
const video = document.createElement('video');
// Локальный файл
// video.src = 'video.mp4';
// Удаленный файл
video.src =
'https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4';
// Устанавливаем постер для видео
video.poster =
'https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217';
// Отключаем автозапуск
video.autoplay = false;
// Включаем элементы управления
video.controls = true;
// Звук включен
video.muted = false;
// Устанавливаем высоту видео в пикселях
video.height = 240; // в пикселях
// Устанавливаем ширину видео в пикселях
video.width = 320; // в пикселях
// Получаем элемент с id 'box'
const box = document.getElementById('box');
// Добавляем элемент видео в контейнер 'box'
box.appendChild(video);
Таким образом, мы добавили новый элемент video на html страницу посредством JavaScript и DOM.
--
Создано 26.06.2024 13:11:54
-
Михаил Русаков
Комментарии (1):
Спасибо Михаил! Я уже купил курс Программирование на JavaScript с Нуля до Гуру 2.0 и очень доволен. С Уважением к Вам Ахмад
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.