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

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


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

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

Есть код:
 <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'));
    });

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

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

 13.07.2015 G-Force  jQuery
наверх