Реализация работы ссылок при использовании тега video в html5

[ale10ey]

Здравствуйте, у меня есть вопрос по реализации работы ссылки "Смотреть видеоурок" и "Скачать видеоурок", где не помешала ваша помощь.

1. Сначала 1 из 4 скриншотов страницы, чтобы было понятно о чем речь.


2. Код html:

<div id="video">

<a class="view" href="video/lesson_1/lesson/interface.mp4" title="Смотреть видеоурок">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>

<div id="lesson">
<video id="movie" class="video" controls="controls" poster="video/lesson_1/interface.png" >
<source src="video/lesson_1/interface.ogv" type='video/ogg; codecs="theora, vorbis"' />
<!-- Firefox, Chrome, Opera -->
<source src="video/lesson_1/lesson/interface.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<!-- Firefox, IE9,10, Chrome, Safari -->
<source src="video/lesson_1/interface.webm" type='video/webm; codecs="vp8, vorbis"' />
<!-- Firefox, Chrome, Opera -->

<p>Видео не поддерживается вашим браузером&nbsp;!</p>

<a href="video/lesson_1/lesson/interface.mp4"></a>
</video>
</div>
<a class="load" href="video/lesson_1/interface.mp4" title="Скачать видеоурок">&uarr;&nbsp;Скачать видеоурок&nbsp;&uarr;</a>

</div> <!-- video ends -->

3. Все реализуется с помощью тега <video> (html 5) и если кликнуть на play, то видео будет проигрываться, для этого тег video и нужен.

Верхняя ссылка "Смотреть видеоурок" должна запускать видео, как при нажатии на кнопку play в 1 скриншоте, в данный момент это просто ссылка, при клике на которую, видеофайл будет загружаться с помощью браузера или установленного какого-либо менеджера загрузки.

Нижняя ссылка "Скачать видеоурок" при клике на которую, у меня выскакивает окно с internet download manager и предлагает загрузить программу и в htaccess такая строчка:

AddType application/octet-stream .rar .doc .pdf .xls .mp4

т.е принудительная загрузка.

Вкратце верхняя ссылка должна проигрывать видео, а нижняя "предлагать" загрузить видеофайл.
В данный момент обе ссылки одинаковы в плане html кода:

<a class="view" href="video/lesson_1/lesson/interface.mp4" title="Смотреть видеоурок">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>

<a class="load" href="video/lesson_1/interface.mp4" title="Скачать видеоурок">&uarr;&nbsp;Скачать видеоурок&nbsp;&uarr;</a>

С уважением и заранее благодарен.

---

P.S.: Как правильно скачать программу для пользователя при помощи ссылки "Скачать программу", если это архив, то, конечно, будет окно браузера, в котором будет предложено скачать программу, а если это просто видеофайл (avi, mp4 и т.д.) и не установлен никакой менеджер загрузки на компьютере пользователя, то если такой пользователь желая скачать видеофайл, его не скачает, он просто начнет воспроизводится, поэтому я и спросил насчет ссылки "Скачать программу".

[ale10ey]

Уважаемый администратор, может быть вы подскажете как решить данную ситуацию описанную в 1 сообщении.
По сути нужно для ссылки "Смотреть видеоурок" запускать видео и для ссылки "Скачать видеоурок" загружать видео.

<a class="view" href="video/lesson_1/lesson/interface.mp4" title="Смотреть видеоурок">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>

<a class="load" href="video/lesson_1/interface.mp4" title="Скачать видеоурок">&uarr;&nbsp;Скачать видеоурок&nbsp;&uarr;</a>

Заранее благодарен.

[Admin]

Вообще не понял, в чем проблема с запуском видео...
Делается элементарно:

Код:

<script type="text/javascript">
$(".view").click(function(){
    document.getElementById("movie").play();
    return false;
});
</script>

[ale10ey]

Доброе время суток, проблемы с запуском видео нет, если использовать данный код:

<div id="video">

<a class="view" href="video/lesson_1/lesson/interface.mp4" title="Смотреть видеоурок">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>

<div id="lesson">

<video id="movie" class="video" controls="controls" poster="video/lesson_1/interface.png" >
<source src="video/lesson_1/interface.ogv" type='video/ogg; codecs="theora, vorbis"' />
<!-- Firefox, Chrome, Opera -->
<source src="video/lesson_1/lesson/interface.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<!-- Firefox, IE9,10, Chrome, Safari -->
<source src="video/lesson_1/interface.webm" type='video/webm; codecs="vp8, vorbis"' />
<!-- Firefox, Chrome, Opera -->

<p>Видео не поддерживается вашим браузером&nbsp;!</p>

<a href="video/lesson_1/lesson/interface.mp4"></a>
</video>
</div> <!-- lesson ends -->

<a class="load" href="video/lesson_1/interface.mp4" title="Скачать видеоурок">&uarr;&nbsp;Скачать видеоурок&nbsp;&uarr;</a>

</div> <!-- video ends -->

Все, что внутри тега <video></video> работает нормально. Если кликнуть на play, как на скриншоте ниже, то видео начнет проигрываться, можно остановить, поставить на паузу, тут все нормально.



Обратите внимание, что сверху ссылка ("Смотреть видеоурок") и снизу ссылка ("Скачать видеоурок"), которые не входят в тег видео, но должны работать таким образом:

1. Если кликнуть по ссылке "Смотреть видеоурок", видео должно запускаться, как если бы кликнуть на кнопку play.

2. Если кликнуть по ссылке "Скачать видеоурок", то будет предложено скачать видеоурок. Если бы у меня видео было бы в формате rar или zip, то было бы окно браузера, для скачивания, но у меня формат mp4, что усложняет задачу.

В данный момент я удалил internet download manager и обе ссылки работают одинаково, т.е. если кликнуть, то в этом же окне видео будет проигрываться на всю ширину окна, а если менеджер будет установлен, то выйдет окно для загрузки, но так как у пользователя скорее всего не будет установлен менеджер загрузки, то после клика на любую ссылку видео будет проигрываться.

т.е. имея html код для ссылкок "Смотреть видеоурок" и "Скачать видеоурок", хотелось бы реализовать, что описал в пункте 1 и 2, где сами ссылки не привязаны к тегу <video>, а одна находится сверху, а другая внизу от тега.

<a class="view" href="video/lesson_1/lesson/interface.mp4" title="Смотреть видеоурок">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>

<a class="load" href="video/lesson_1/interface.mp4" title="Скачать видеоурок">&uarr;&nbsp;Скачать видеоурок&nbsp;&uarr;</a>

Данный код:

Код:

<script type="text/javascript">
$(".view").click(function(){
    document.getElementById("movie").play();
    return false;
});
</script>

не работает, так как надо немного другое реализовать, но в любом случае спасибо.
Надеюсь я более или менее изъяснился, что требуется. Хочется это реализовать для удобства пользователей, которые не только захотят посмотреть видео, но также и скачать, если им понравится.

С уважением и заранее благодарен .

[Admin]

А сейчас разве не так?

Приведенный JS код (при наличии библиотеки jquery) эмитирует нажатие на кнопку "Play" и видео начинает проигрываться. При этом при нажатии на ссылку "Скачать видеоурок", в Опере, IE и Firefoxe выскакивает окошко с предложением скачать видео. Crome сразу скачивает видео без окошка.

Я добавил приведенный Вами код на страничку и добавил JS код, который Вам предоставил и больше изменений не вносил.

Может проблема в настройках вашего браузера?

[ale10ey]

Доброе время суток,
Проверил в остальных браузерах (Opera, Chrome, IE, Safari) и картина такая:

1. В Opera, Mozilla и Chrome при клике на любую из ссылок (Скачать видеоурок или Смотреть видеоурок) запускается видео на всю страницу, а другого контента страницы не видно, если кликать на кнопку play используя тег video, то видео будет проигрываться в том же размере, как и на странице, а если пользователь захочет посмотреть на весь экран, то он может и это сделать, а тут получается что при клике на ссылку "Смотреть видеоурок", остального содержимого на странице не видно и видео начинает проигрываться, далее его можно открыть на весь экран.



2. Safari хоть и не поддерживает тег видео, ссылки имеются, но работает, как и для браузеров Opera, Mozilla и Chrome.

3. В IE при клике на любую из ссылок появляется окно, где предлагается открыть или сохранить файл.

Прикладываю архив, где код html и js код:

  test.rar (Размер: 719 байт / Загрузок: 1)

Библиотека jquery имеется, jquery_1.11.2.min (не включил в страницу теста)

Еще раз для наглядности:

<a class="view" href="video/lesson_1/lesson/interface.mp4" title="Смотреть видеоурок">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>

<a class="load" href="video/lesson_1/interface.mp4" title="Скачать видеоурок">&uarr;&nbsp;Скачать видеоурок&nbsp;&uarr;</a>

Обе ссылки имеют 1 файл - interface.mp4, но одна ссылка должна проигрывать, а другая загружать видеофайл, что на данный момент не выполняется.

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

Заранее благодарен.

---

P.S.: изображение относится к пункту 1, где после клика на ссылку "Смотреть видеоурок" появляется страница, где как видно, другого содержимого не видно и title страницы - interface.mp4

[Admin]

Подключил jquery, и поместил JS код внутрь $(document).ready(function(){ });.

Все работает.

Код:

<!doctype html>
<head>
<meta charset="utf-8" />

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".view").click(function(){
    document.getElementById("movie").play();
    return false;
});
});
</script>

</head>
<body>

<div id="video">
    <a class="view" href="video/lesson_1/lesson/interface.mp4" title="Смотреть видеоурок">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>
    <div id="lesson">
        <video id="movie" class="video" controls="controls" poster="video/lesson_1/interface.png" >
            <source src="video/lesson_1/interface.ogv" type='video/ogg; codecs="theora, vorbis"' />
            <!-- Firefox, Chrome, Opera -->
            <source src="video/lesson_1/lesson/interface.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
            <!-- Firefox, IE9,10, Chrome, Safari -->
            <source src="video/lesson_1/interface.webm" type='video/webm; codecs="vp8, vorbis"' />
            <!-- Firefox, Chrome, Opera -->

            <p>Видео не поддерживается вашим браузером&nbsp;!</p>

            <a href="video/lesson_1/lesson/interface.mp4"></a>
        </video> <!-- lesson ends -->
    </div>
    <a class="load" href="video/lesson_1/interface.mp4" title="Скачать видеоурок">&uarr;&nbsp;Скачать видеоурок&nbsp;&uarr;</a>

</div> <!-- video ends -->

</body>
</html>

[ale10ey]

Здравствуйте,
Ссылка "Смотреть видеоурок" работает нормально, но ссылка "Скачать видеоурок" не работает должным образом, т.е. если кликнуть на ссылку, то видео будет проигрываться, если бы конечно был бы установлен любой менеджер загрузки или видео было бы в формате rar или zip, то после клика появилось бы окно, где можно было бы скачать видеофайл, но у меня файл формата mp4 и браузер начинает автоматически проигрывать видеофайл.

Код html:
<a class="load" href="video/lesson_1/interface.mp4" title="Скачать видеоурок">&uarr;&nbsp;Скачать видеоурок&nbsp;&uarr;</a>

Не помогает также и строчка в htaccess:
#Принудительная загрузка
AddType application/octet-stream .rar .doc .pdf .xls .mp4

Если заархивирую файл (rar или zip) , то проблем нет будет окно, где можно скачать файл, но тут как реализовать подобный момент еще не сталкивался.

С уважением и заранее благодарен.

P.S.: и еще к вам просьба, сейчас у меня видеофайл проигрывается, но только для 1 видеофайла, а у меня, например, их будет более одного, и при клике на ссылку "Смотреть видеоурок" для всех видеофайлов будет проигываться 1 файл, так как в скрипте прописан class="View"

<script>
$(document).ready(function(){
$(".view").click(function(){
document.getElementById("movie").play();
return false;
});
});
</script>

У меня для всех видефайлов одинаковый класс, а если прописывать разные классы, то и скриптов несколько будет.

Например к примеру так:

1. <a class="view" href="video/lesson_1/lesson/interface.mp4" title="Смотреть видеоурок">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>

2. <a class="view" href="video/lesson_2/lesson/draw.mp4" title="Смотреть видеоурок">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>

3. <a class="view" href="video/lesson_3/lesson/select.mp4" title="Смотреть видеоурок">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>

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

Может быть привязать к href, хотя не думаю что сработает, но не хотелось бы создавать для каждого блока js в котором будет только отличаться классы.

Заранее благодарен.

[Admin]

У меня почему-то и без htaccess скачивается, а не просматривается...
Попробуйте добавить атрибут download - http://htmlbook.ru/html/a/download

[ale10ey]

P.S.: и еще к вам просьба, сейчас у меня видеофайл проигрывается, но только для 1 видеофайла, а у меня, например, их будет более одного, и при клике на ссылку "Смотреть видеоурок" для всех видеофайлов будет проигываться 1 файл, так как в скрипте прописан class="View"

<script>
$(document).ready(function(){
$(".view").click(function(){
document.getElementById("movie").play();
return false;
});
});
</script>

У меня для всех видефайлов одинаковый класс, а если прописывать разные классы, то и скриптов несколько будет.

Например к примеру так:

1. <a class="view" href="video/lesson_1/lesson/interface.mp4" title="Смотреть видеоурок">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>

2. <a class="view" href="video/lesson_2/lesson/draw.mp4" title="Смотреть видеоурок">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>

3. <a class="view" href="video/lesson_3/lesson/select.mp4" title="Смотреть видеоурок">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>

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

Может быть привязать к href, хотя не думаю что сработает, но не хотелось бы создавать для каждого блока js в котором будет только отличаться классы.

Заранее благодарен.