видео не выскакивает при нажатии на кнопки

У меня есть 5 видео и видеоплеер с 5 разными кнопками.
Когда я нажимаю на любую из кнопок, он загружает видео, но если я хочу посмотреть другой, мне нужно перезагрузить страницу и нажать на одну из них.

Как я могу исправить это, чтобы вы могли нажать на любую кнопку видео в любое время и все еще заставить видео работать. Я думаю, мне нужно сделать заявление с нажатой мышью, если да, то как бы я его написал. Вот мой html и JavaScript:

HTML

<video id="myVideo" controls autoplay></video>
    <div>
        <a href="#" onClick="addVideo1()" onMouseUp="mouseUp1">Demo Reel</a>
        <a href="#" onClick="addVideo2()" onMouseUp="mouseUp2">Video1</a>
        <a href="#" onClick="addVideo3()" onMouseUp="mouseUp3">Video2</a>
        <a href="#" onClick="addVideo4()" onMouseUp="mouseUp4">Video3</a>
        <a href="#" onClick="addVideo5()" onMouseUp="mouseUp5">Video4</a> 
    </div>

JavaScript

var myVid = document.getElementById('myVideo');

var myVidContents1 = "<source src='video/demoreel.mp4' type='video/mp4'/> <source src='video/demoreel.webm' type='video/webm'/> <source src='video/demoreel.ogv' type='video/ogg'/>";

function addVideo1() {
    myVid.innerHTML = myVidContents1;
}

var myVidContents2 = "<source src='video/video1.mp4' type='video/mp4'/> <source src='video/video1.webm' type='video/webm'/> <source src='video/video1.ogv' type='video/ogg'/>";

function addVideo2() {
    myVid.innerHTML = myVidContents2;
}

var myVidContents3 = "<source src='video/video2.mp4' type='video/mp4'/> <source src='video/video2.webm' type='video/webm'/> <source src='video/video2.ogv' type='video/ogg'/>";

function addVideo3() {
    myVid.innerHTML = myVidContents3;
}

var myVidContents4 = "<source src='video/video3.mp4' type='video/mp4'/> <source src='video/video3.webm' type='video/webm'/> <source src='video/video3.ogv' type='video/ogg'/>";

function addVideo4() {
    myVid.innerHTML = myVidContents4;
}

var myVidContents5 = "<source src='video/video4.mp4' type='video/mp4'/> <source src='video/video4.webm' type='video/webm'/> <source src='video/video4.ogv' type='video/ogg'/>";

function addVideo5() {
    myVid.innerHTML = myVidContents5;
}

javascript html video html5-video
person zac    schedule 03.12.2012    source источник
comment
как насчет использования target=_blank..   -  person bipen    schedule 03.12.2012
comment
куда бы я добавил это именно?   -  person zac    schedule 04.12.2012
comment
Не относясь к проблеме, но я бы предложил создать массив с информацией, а затем вызвать addVideo(id), а не определять новую функцию addVideo() для каждого элемента. Всякий раз, когда блок кода полностью дублируется и изменяется один бит данных, это обычно указывает на проблематичный шаблон проектирования.   -  person Nucleon    schedule 06.12.2012

Ответы (2)


arrow_upward
0
arrow_downward

Попробуй это:

function addVideo1() {
    myVid.innerHTML = myVidContents1;
    return false;
  //This over-rides the default link behaviour,
  // so the browser doesn't scroll to the top of the page instead of firing your code
}
person daveyfaherty    schedule 03.12.2012

arrow_upward
0
arrow_downward

После того, как вы создадите новые исходные теги, вам нужно заставить элемент видео загружать новые источники, например:

myVid.load();

См.: пытаетесь добавить видеопроигрыватель с несколькими источниками с более чем одним видео?

Ваши обработчики кликов должны работать нормально, но могут быть некоторые странные побочные эффекты UX. Вам, вероятно, лучше использовать тег, отличный от «a», например «span» или «button», а затем вы можете установить обработчик кликов в javascript:

document.getElementById('link1').addEventListener('click', addVideo1, false);
// etc...

Не упускайте третий «ложный» аргумент, иначе ваш код не будет работать в старых версиях Firefox.

person brianchirls    schedule 05.12.2012