смена источника видео с помощью кнопки html

Question

Я пытаюсь изменить источник видео одним нажатием кнопки. Цель состоит в том, чтобы пользователь мог щелкнуть кнопку (ie заголовок видео), и появится нужное видео. Я изо всех сил пытаюсь заставить этот код работать. Появляется Vid 1, но ни одна из кнопок не работает.

Есть ли у кого-нибудь мысли о том, где я ошибаюсь? спасибо

html

<button onClick="changevid('videos/vid1.mp4')">Video 1</button>
<button onClick="changevid('videos/vid2.mp4')">Video 2</button>
<button onClick="changevid('videos/vid3.mp4')">Video 3</button>

<video controls id="change">
  <source src="videos/Vid1.mp4" type="video/mp4"></source>
</video>

JS

<script language="javascript" type="text/javascript"> 

function changevid(buttonLink) {

document.getElementById('change').src = buttonlink;

}

</script>

Answer 1

Вы должны быть осторожны с орфографией / чувствительностью к регистру. Вы передали buttonLink (с заглавной буквы L), и вы присваиваете это значение src, но пишется с маленькой буквы l. Эти вещи имеют значение! (Та же ошибка была сделана с vid1.mp4 / Vid1.mp4)

Вот рабочая скрипка (ссылка на видео на моем сайте - работает только первое видео). Если вы нажмете кнопку Видео 1, вы увидите обновление видео. Однако, если вы измените прописные буквы на строчные в buttonLink, вы увидите, что код не будет работать.

Надеюсь, это поможет

Answer 2

Ну, я думаю, что вы получили опечатку там

кнопка L чернила! == кнопка l чернила

Помните, javascript чувствителен к регистру.

Answer 3

Вы делаете все правильно, ожидая, что вы не загружаете видео. В функции сделайте что-то вроде

function changevid(buttonLink) {
video = document.getElementById('change');
video.src = buttonLink;
video.load(); //this line is imported to let browsesr fetch new video
}

Прочтите официальную документацию w3 с примером на https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/load