<MyRusakov.ru />

Профессия Web-разработчик

Профессия Web-разработчик

Этот комплект за 8 месяцев превратит Вас в Web-разработчика с нуля. Учиться достаточно 1 час в день.

Начнёте Вы с HTML, CSS и вёрстки сайтов. Потом перейдёте к программированию и JavaScript. Затем изучите PHP, MySQL, SQL, Python. Изучите Web-фреймворки Laravel и Django. Создадите 5 своих сайтов для портфолио.

Комплект содержит:

- 540 видеоуроков

- 110 часов видео

- 1205 заданий для закрепления материала из уроков

- 5 финальных тестов

- 7 сертификатов

- 12 Бонусных курсов

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Как создать элемент Video с помощью JavaScript

Как создать элемент Video с помощью JavaScript

Здравствуйте! В сегодняшней статье мы рассмотрим как добавить видео элемент на HTML страницу средствами языка JavaScript.

Чтобы создать видеоэлемент:

  1. Используем document.createElement() метод для создания video элемента.

  2. Установим src атрибут элемента на локальный или удаленный видеофайл.

  3. Добавим элемент на страницу, используя метод 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(&#039;video&#039;);

//  Локальный файл
// video.src = &#039;video.mp4&#039;;

//  Удаленный файл
video.src =
  &#039;https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4&#039;;

// Устанавливаем постер для видео
video.poster =
  &#039;https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217&#039;;

// Отключаем автозапуск
video.autoplay = false;
// Включаем элементы управления
video.controls = true;
// Звук включен
video.muted = false;
// Устанавливаем высоту видео в пикселях
video.height = 240; //  в пикселях
// Устанавливаем ширину видео в пикселях
video.width = 320; // в пикселях

// Получаем элемент с id &#039;box&#039;
const box = document.getElementById(&#039;box&#039;);

// Добавляем элемент видео в контейнер &#039;box&#039;
box.appendChild(video);


Таким образом, мы добавили новый элемент video на html страницу посредством JavaScript и DOM.

-

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

Haron Haron 27.06.2024 20:44:16

Спасибо Михаил! Я уже купил курс Программирование на JavaScript с Нуля до Гуру 2.0 и очень доволен. С Уважением к Вам Ахмад

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.