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

[ale10ey]

С атрибутом download работает, спасибо за подсказку забыл про этот атрибут.

Погуглив нашел еще вариант через htaccess:

Код:

<FilesMatch "\.(mp4)$">
    ForceType application/octet-stream
    Header set Content-Disposition attachment
</FilesMatch>

При таком коде загрузка работает отлично, только до сих пор не пойму как работает у вас без атрибута и кода в htaccess,
если у вас rar или zip архив, то понятно будет работать, так браузер настроен, а вот если обычный видеофайл в формате avi или mp4.

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

[Admin]

Если у Вас будет несколько видео на одной страничке, то тут стоит присвоить тегам video разные id (movie1, movie2 и т.д.).

В таком случае возможно обойтись и без jquery.

Предложенный ранее JS код можно будет удалить, а в ссылки добавить обработчик события onclick:

Код:

<a onclick="document.getElementById('movie1').play();return false;" class="view" href="video/lesson_1/lesson/interface.mp4" title="Смотреть видеоурок">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>

Для последующих ссылок стоит менять только id с movie1 на movie2 и т.д.

[ale10ey]

Здравствуйте, спасибо , все работает .

Есть последний вопрос по реализации ссылки "Смотреть видеоурок"

В данный момент для ссылок "Смотреть видеоурок" так:

<a class="view" href="video/lesson_1/interface.mp4" title="Смотреть видеоурок" onclick="document.getElementById('interface').play();return false;">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>

<a class="view" href="video/lesson_1/interface.mp4" title="Смотреть видеоурок" onclick="document.getElementById('draw').play();return false;">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>

Все работает прекрасно, но хочется добавить функциональности, т.е. при клике на ссылку "Смотреть видеоурок" видео запускается, а ссылка менялась на "Остановить видеоурок", далее после клика на ссылку "Остановить видеоурок" видео останавливается, а после повторного клика начинает проигрываться снова.
Т.е. как на канале YouTube, только там если надо поставить на паузу, то кликаешь по экрану или кнопке, а для продолжения кликаешь снова по экрану или кнопке.

Если несложно реализовать вот такой момент, буду благодарен помощь.

[Admin]

Нашаманил. Сам не ожидал.

Ссылки теперь выглядят так:

Код:

<a onclick="play_video('movie',this);return false;" class="view" href="video/lesson_1/lesson/interface.mp4" title="Смотреть видеоурок">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>

А JS код нужно заменить на такой:

Код:

function play_video(id_video,link_text){
var pleer=document.getElementById(id_video);

if (pleer.paused) {
    pleer.play();
    link_text.innerHTML="↓ Остановить видеоурок ↓";
}
else {
    pleer.pause();
    link_text.innerHTML="↓ Смотреть видеоурок ↓";
}
}

[ale10ey]

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

<a class="view" href="video/lesson_1/interface.mp4" title="Смотреть видеоурок" onclick="document.getElementById('interface').play();return false;">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>

и для последующих ссылок работает нормально изменяя id соответственно.

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

[Admin]

Что именно не работает? Видео не запускается или название ссылки не изменяется?

У меня все работает и в Опере и в Crome и в FireFox-e.

В ссылки вносили изменения?
<a onclick="play_video('movie',this);return false;" class="view" href="video/lesson_1/lesson/interface.mp4" title="Смотреть видеоурок">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>

[ale10ey]

Здравствуйте,

Если js код:

Код:

<script>
function play_video(id_video,link_text){
var pleer=document.getElementById(id_video);

if (pleer.paused) {
    pleer.play();
    link_text.innerHTML="&darr;&nbsp;Остановить видеоурок&nbsp;&darr;";
}
else {
    pleer.pause();
    link_text.innerHTML="&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;";
}
}
</script>

и ссылка:

Код:

<a onclick="play_video('movie',this);return false;" class="view" href="video/lesson_1/interface.mp4" title="Смотреть видеоурок">&darr;&nbsp;Смотреть видеоурок&nbsp;&darr;</a>

При клике на ссылку "Смотреть видеоурок" видео проигрывается
но, не на странице

Код:

http://autocad-problem.net/lesson.html

, а на странице

Код:

http://autocad-problem.net/video/lesson_1/interface.mp4

,

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

В других браузерах такая же картина...Может ошибка в коде или в js ?

[Admin]

Потестируйте на пустой страничке. Только ссылка и JavaScript код.
Скопировал код из Вашего сообщения, менял местами JavaScript код и ссылку - работает.
У тега video id="movie"? Может внутри video что-то меняли?

[ale10ey]

P.S.: На всякий случай сделал страницу, где можно найти ошибку если имеется.

Прикрепление удалено по просьбе автора.

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

[Admin]

Как я и предположил в предыдущем сообщении, Вы заменили id в теге video.
Следовательно, в ссылке <a onclick="play_video('interface',this);return false;" ... нужно указывать новый id!