Нужен совет: что использовать для данной цели?

@constantin01 · Регистрация: 20.09.2019

Студворк — интернет-сервис помощи студентам

Здравствуйте!

Возникла необходимость создать простую веб-страницу, которая бы поддерживала основную функцию:

Воспроизведение видео. Есть база id видео из ютуба, нужно воспроизводить их в случайно порядке, начиная с определенного момента. Воспроизведение начинается после того, как пользователь нажимает соответствующую кнопку. База видео есть в json файле.

Минимальный дизайн, примерный макет в прикрепленных файлах.

Опыта в веб-разработке почти нет: только базовые знания html.

Будет ли достаточно только одного html для вышеописанной задачи? Или нужно смотреть в сторону css, php?

@Oldshelf · 26.02.2020, 19:51

Можно выполнить эту задачу на JavaScript: выбрать случайную запись из базы (загруженной на веб-страницу) и присвоить её атрибуты iframe'у (src). Если json загружать с сервера, понадобится php.

@gogolik · 27.02.2020, 08:48

На голом html и тем более css данную задачу не решить. Понадобится js.

Адреса видео для вставки (embed) или просто "скопировано из адресной строки"? Есть ли в ссылке привязка ко времени старта?

@constantin01 · 27.02.2020, 10:47 **[ТС]**

gogolik,

Имеется база следующего вида: ['id', 'timecode']

'id' - id видео на ютубе
'timecode' - время, начиная с которого запускается видео.

шаблон вставки видео ясен: youtu.be/watch?={id_video}t={timecode}

Можешь назвать ключевые слова для поиска нужных идиом js для решения этой задачи? Изучать js с нуля и полностью не хочется, нужно просто решить именно эту задачу.

@gogolik · 27.02.2020, 11:57

constantin01, в очень общих чертах: парсим файл, выбираем случайный id, берём его таймкод. По клику на кнопку выводим видео.

HTML5
1
2
<input type="button" id="button" value="Нажми">
<div id="content"></div>

JavaScript
1
2
3
4
5
6
7
var data = ваш_json;
var json = JSON.parse(data);
var id = Math.floor(Math.random() * json.length);
var timecode = json[id].timecode;
button.onclick = function(id, timecode) {
  document.getElementById('content').innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/'+id+'?t='+timecode+'" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
};

Код не проверял, просто указал направление куда двигаться.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@constantin01 1 / 1 / 0 Регистрация: 20.09.2019 Сообщений: 61

	Нужен совет: что использовать для данной цели? 26.02.2020, 18:45. Показов 650. Ответов 4 Метки нет (Все метки) Здравствуйте! Возникла необходимость создать простую веб-страницу, которая бы поддерживала основную функцию: Воспроизведение видео. Есть база id видео из ютуба, нужно воспроизводить их в случайно порядке, начиная с определенного момента. Воспроизведение начинается после того, как пользователь нажимает соответствующую кнопку. База видео есть в json файле. Минимальный дизайн, примерный макет в прикрепленных файлах. Опыта в веб-разработке почти нет: только базовые знания html. Будет ли достаточно только одного html для вышеописанной задачи? Или нужно смотреть в сторону css, php? Миниатюры 0

@Oldshelf 36 / 27 / 10 Регистрация: 25.09.2018 Сообщений: 73
	26.02.2020, 19:51
	Можно выполнить эту задачу на JavaScript: выбрать случайную запись из базы (загруженной на веб-страницу) и присвоить её атрибуты iframe'у (src). Если json загружать с сервера, понадобится php. 0

@gogolik Супер-модератор 3957 / 2073 / 831 Регистрация: 13.03.2010 Сообщений: 6,839
	27.02.2020, 08:48
	На голом html и тем более css данную задачу не решить. Понадобится js. Адреса видео для вставки (embed) или просто "скопировано из адресной строки"? Есть ли в ссылке привязка ко времени старта? 0

@constantin01 1 / 1 / 0 Регистрация: 20.09.2019 Сообщений: 61
	27.02.2020, 10:47 [ТС]
	gogolik, Имеется база следующего вида: ['id', 'timecode'] 'id' - id видео на ютубе 'timecode' - время, начиная с которого запускается видео. шаблон вставки видео ясен: youtu.be/watch?={id_video}t={timecode} Можешь назвать ключевые слова для поиска нужных идиом js для решения этой задачи? Изучать js с нуля и полностью не хочется, нужно просто решить именно эту задачу. 0