Как заменить изображение, вызываемое кнопкой меню, на встроенное видео

Я пытаюсь адаптировать веб-шаблон под свои нужды. Сайт выглядит так: http://tomcreus.com В левом нижнем углу есть три кнопки (1,2, 3), которые позволяют изменять фоновую картинку. Я хочу заменить картинки на встроенные видео. Это возможно? Насколько это сложно? Какую часть кода мне нужно опубликовать, чтобы помочь?

ИЗМЕНИТЬ:

<ul class="pagination">
    <li class="current"><a href="images/bg_img1.jpg">1</a></li>
    <li><a href="images/bg_img1.jpg">2</a></li>
    <li><a href="images/bg_img3.jpg">3</a></li>
</ul>

Заранее спасибо!


html iframe embedded-video
person Moana    schedule 03.01.2014    source источник
comment
Добро пожаловать в stackoverflow! Пройдите этот тур, чтобы узнать, как этот сайт работает и для чего он нужен. Размещение кода было бы полезно.   -  person Devraj Gadhavi    schedule 03.01.2014
comment
Спасибо! Опять же, я не знаю, какая часть кода, но это меню, вызывающее фоновые изображения. Я хотел бы вместо изображений встроить видео? ‹Ul class = pagination› ‹li class = current› ‹a href=images/bg_img1.jpg› 1 ‹/a› ‹/li› ‹li› ‹a href=images/bg_img1.jpg› 2 ‹/a› ‹ / li ›‹li› ‹a href=images/bg_img3.jpg› 3 ‹/a› ‹/li› ‹/ul›   -  person Moana    schedule 03.01.2014

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете поместить video в тег anchor следующим образом.

<ul class="pagination">
    <li class="current">
        <a href="https://www.google.com/">
            <video width="320" height="270" controls>
                <source src="steve_powell_320_hard.mp4"  type="video/mp4; codecs=avc1.42E01E, mp4a.40.2">
                <source src="steve_powell_320_hard.webm" type="video/webm; codecs=vp8, vorbis">
                <source src="steve_powell_320_hard.ogv"  type="video/ogg; codecs=theora, vorbis">
            </video>
        </a>
    </li>
    <li><a href="images/bg_img1.jpg">2</a></li>
    <li><a href="images/bg_img3.jpg">3</a></li>
</ul>

Просто измените src элементов source на физический видеофайл в вашей системе / сервере ИЛИ укажите URL-адрес видео с веб-сайта.

РЕДАКТИРОВАТЬ:

Эта ссылка w3schools может быть полезна для встраивания youtube видео. И эта ссылка предназначена для встраивания физических видеофайлов в ваш HTML.

РЕДАКТИРОВАТЬ:

Отметьте ниже два вопроса. Оттуда вы можете получить какое-то направление. Это для HTML5

  1. видео в качестве фона сайта? HTML 5
  2. Можно ли отображать HTML5 в качестве фона в полноэкранном режиме?
person Devraj Gadhavi    schedule 03.01.2014
comment
Спасибо, я попробовал это, но на самом деле он встраивает его только в меню, а не в качестве фона ... снова ссылка на аналогичный веб-сайт: tomcreus.com - person Moana; 03.01.2014
comment
Вы хотите показывать видео при нажатии кнопки? Вместо изображения, которое в настоящее время изменяется при нажатии кнопки? - person Devraj Gadhavi; 03.01.2014