Как сделать что бы при нажатие на кнопку менялось не только видео но и название с описанием к видео

Question

Вот код суть которого проста, при нажатие на кнопку меняется серий. Вопрос: как сделать что бы если играет 1 серия то показывает весь текст относяшийся к 1 серии, а при переходе на второй текст относяшийся к 1 заменялся на текст относящийся к 2 серии.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 
</head>
<body>
  <div>
    <video width="400" height="300" controls="controls" id="video">
            <source src="1.mp4" id="source">
        </video>
  </div>
  <input type="button" onclick="videoChange(0)" value="1">
  <input type="button" onclick="videoChange(1)" value="2">
<div><p id="text ">серия 1 </p><p>Допусти тут есть описание</p> </div>
<div><p id="text ">серия 2 </p><p>Допусти тут есть описание</p> </div>
</body>
<script>
    var videos = [
  "1.mp4",
  "2.mp4",
  "3.mp4",
  "4.mp4",
];

function videoChange(id) {

  var video = document.getElementById("video");
  var source = document.getElementById("source");

  source.src = videos[id];
  video.appendChild(source);

  video.load();
  video.pause();
}

Answer 1

Вместо этого:

<div><p id="text ">серия 1 </p><p>Допусти тут есть описание</p> </div>
<div><p id="text ">серия 2 </p><p>Допусти тут есть описание</p> </div>

Можно держать только один тег, куда потом динамически будет вставляться текст.

А вместо этого:

 var videos = [
  "1.mp4",
  "2.mp4",
  "3.mp4",
  "4.mp4",
];

Надо сделать массив объектов, где будет всё полноценно:

let data = [
    {video: "1.mp4", title: 'Заголовок1', description: 'Описание1'},
    {video: "2.mp4", title: 'Заголовок2', description: 'Описание2'},
    {video: "3.mp4", title: 'Заголовок3', description: 'Описание3'},
];

И вот теперь при клике на воспроизведение видео и при работе функции videoChange, достаточно брать данные из массива по нужному индексу и распихивать значения из соответствующих свойств туда, куда нужно: видео в видео, описание в описание

БЛОГ НА HUSL

Как сделать что бы при нажатие на кнопку менялось не только видео но и название с описанием к видео

Ответы (1 шт):