Задать вопрос
Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » jQuery » Как реализовать изменения ссылки на видео при клике ?

Как реализовать изменения ссылки на видео при клике ?

     23.07.2015    Все вопросы » jQuery    2243

вопрос
Здравствуйте,
Помогите пожалуйста реализовать изменения ссылки на видео при клике.

Есть код: 
 <iframe id="player" src="site.ru/video1.mp4" name="film_main" id="film_main" scrolling="no" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" frameborder="0" height="400" width="600"></iframe>
<ul>
<li><a  data-val="site.ru/video1.mp4">Клик чтобы посмотреть видео 1</a></li>
<li><a  data-val="site.ru/video2.mp4">Клик чтобы посмотреть видео 2</a></li>
<li><a  data-val="site.ru/video3.mp4">Клик чтобы посмотреть видео 3</a></li>
</ul>
Нужно чтобы при клике в iframe менялась ссылка на видео.
Есть вот такой рабочий вариант: 
<iframe src="site.ru/video1.mp4" name="film_main" id="film_main" scrolling="no" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" frameborder="0" height="400" width="600"></iframe>    

<select class="movie" name="select_items" style="width: 100%; height: 212px; font-weight:700" size="5" onchange="javascript:urla=this.value;document.getElementById('film_main').src=urla;">

<option value="site.ru/video1.mp4">Клик чтобы посмотреть видео 1</option>
<option value="site.ru/video2.mp4">Клик чтобы посмотреть видео 2</option>
<option value="site.ru/video3.mp4">Клик чтобы посмотреть видео 3</option>
</select>
Но мне надо это осуществить с помощью тегов 
<ul /> и <li />
.
Заранее спасибо.

Ответа пока нет

 

2 комментария

vitnet
PHP-developer

vitnet - 24 июля 2015 10:14 - 

function change(el){
    $('#player').attr('src', $(el).data('src'));
}


 <iframe id="player" src="site.ru/video1.mp4" scrolling="no" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" frameborder="0" height="400" width="600"></iframe>

<ul>
<li><a data-src="site.ru/video1.mp4" onclick="return change(this);">видео 1</a></li>
<li><a data-src="site.ru/video2.mp4" onclick="return change(this);">видео 2</a></li>
<li><a data-src="site.ru/video3.mp4" onclick="return change(this);">видео 3</a></li>
</ul>
Sandman
Юзер

Sandman - 24 июля 2015 10:22 -

Спасибо вот я нашел очень простое решение может кому то понадобится:


<div id="big"> 
<iframe id="player" src="site.ru/video1.mp4" scrolling="no" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" frameborder="0" height="400" width="600"></iframe>
</div>
<ul id="snav">
<li><a  data-link="site.ru/video1.mp4">видео 1</a></li>
<li><a  data-link="site.ru/video2.mp4">видео 2</a></li>
<li><a  data-link="site.ru/video3.mp4">видео 3</a></li>
</ul>




// Change iframe link
    $('#snav li a').on('click', function(){
        $('#big iframe').attr('src', $(this).data('link'));
    });
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 15.03.2013 www7sergey  jQuery
 04.08.2013 monach  jQuery, Ламерские вопросы
 24.08.2013 jarrro  Общие вопросы, jQuery
 15.09.2013 dimon212909  jQuery
 19.01.2014 ale-eex  Шаблоны (TPL), Стили (CSS), jQuery
 19.01.2014 ale-eex  Шаблоны (TPL), Стили (CSS), jQuery
 28.01.2014 estverum  Шаблоны (TPL), jQuery
 18.07.2014 249893  Шаблоны (TPL), jQuery
 20.12.2014 GSMexpress  Общие вопросы по вёрстке, jQuery
 13.07.2015 G-Force  jQuery
  • non-stop | Как решить проблему индексации DLE в пои ... 1
    Фото non-stop
    non-stop
    Как решить проблему индексации DLE в поиске Bing?
    19-12-2024, 17:02
    Забыл написать что обновился до последней версии 17.3
    Интересно узнать, это только у меня проблема, или это проблема движка? проверьте свои сайты на наличие в поиске Bing.
    В 11 винде именно эта поисковая система стоит по умолчанию . кроме того эта же поисковая система отвечает за индекс еще одного поисковика - yahoo. Эти системы могут давать дополнительный процент пискового трафика на сайты.
  • lutskboy | Как максимально грамотно организовать до ... 1
    Фото lutskboy
    lutskboy
    Как максимально грамотно организовать добавление материалов через SQL-запросы?
    18-12-2024, 21:39
    все верно. related_ids автоматом заполняется потом.
  • derebas | Убираем xfsearch из адресной строки 7
    Фото derebas
    derebas
    Убираем xfsearch из адресной строки
    16-12-2024, 02:35
    в правилах транслитерации для tagvalue поставьте замену " " => "-", например так
    str_replace(array('.', ' ', '/', '&', "'", '+', '«', '»', ':', '!'), array('', '-', '-', 'and', '', '', '', '', '', '')
  • toxicpioner | Убираем xfsearch из адресной строки 7
    Фото toxicpioner
    toxicpioner
    Убираем xfsearch из адресной строки
    15-12-2024, 19:31
    если в доп поле есть пробел, будет выдавать просто 403 стр
  • dj-avtosh | Воспользовался хаком удаление html из ад ... 2
    Фото dj-avtosh
    dj-avtosh
    Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
    12-12-2024, 17:26
    Нужно правило с year поднять выше всех в .htaccess
  • TeraMoune | Воспользовался хаком удаление html из ад ... 2
    Фото TeraMoune
    TeraMoune
    Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
    11-12-2024, 22:12
    У вас убрано слишком много отличительных признаков в ссылках и теперь ссылки пересекаются. Убрали xfsearch, убрали html, а так же зачем то убрали дефиз разделяющий id и alt_name. Теперь некоторые ссылки будут отвечать выражению под правила ссылок новостей. Исправить вы можете только переосмыслив эти ссылки и добавить в них каких-то отличительных особенностей, переосмыслить чпу.
  • toxicpioner | Как упорядочить ID новостей 19
    Фото toxicpioner
    toxicpioner
    Как упорядочить ID новостей
    9-12-2024, 22:24
    ***Комментарий удален***
  • DnCnv | Как показать только одну категорию, к ко ... 1
    Фото DnCnv
    DnCnv
    Как показать только одну категорию, к которой принадлежит новость?
    9-12-2024, 01:46
    ***Комментарий удален***
  • web102 | Почему не отображается картинка в галере ... 3
    Фото web102
    web102
    Почему не отображается картинка в галерее?
    4-12-2024, 11:49
    дайте адрес сайта. можно в личку
  • Shandi | Почему не отображается картинка в галере ... 3
    Фото Shandi
    Shandi
    Почему не отображается картинка в галерее?
    3-12-2024, 08:53
    Мне как ламеру ничего не понятно:( Кто-то это исправляет за денужку?
наверх