Перейти к содержимому

Фотография
- - - - -

Можно ли приявязать к видео - ссылки


  • Вы не можете создать новую тему
  • Закрытая тема Тема закрыта
Сообщений в теме: 3

#1 Arin

Arin

    Прохожий

    Топикстартер
  • Новичок
  • 0
    2 сообщ.

Отправлено 15 Февраль 2017 в 12:57

Всем доброго дня!

 

Нужна помощь:

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

Как это можно сделать?


  • 0

Спонсор

#2 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1015
    3 690 сообщ.

Отправлено 16 Февраль 2017 в 11:47

Можно использовать любой HTML5 (ну или флеш) плеер.

В нем по timestamp сделать событие.

 

Если не ошибаюсь в чистом HTML5 video - это currentTime

Вот тут инструкция подробная

<pre><div hidden data-starttime=3 data-endtime=7 id=hello>Hello world!</div> <script> var video = document.getElementsByTagName('video')[0]; var hello = document.getElementById('hello'); var hellostart = hello.getAttribute('data-starttime'); var helloend = hello.getAttribute('data-endtime'); video.ontimeupdate = function(e) { var hasHidden = hello.hasAttribute('hidden'); if (video.currentTime > hellostart && video.currentTime < helloend) { if (hasHidden) hello.removeAttribute('hidden'); } else { if (!hasHidden) hello.setAttribute('hidden', ''); } } </script></pre>

То есть, примерно так выглядит:

if (video.currentTime == 10){alert "Город Москва";}

  • 0

#3 Arin

Arin

    Прохожий

    Топикстартер
  • Новичок
  • 0
    2 сообщ.

Отправлено 17 Февраль 2017 в 09:36

 

Можно использовать любой HTML5 (ну или флеш) плеер.

В нем по timestamp сделать событие.

 

Если не ошибаюсь в чистом HTML5 video - это currentTime

Вот тут инструкция подробная

<pre><div hidden data-starttime=3 data-endtime=7 id=hello>Hello world!</div> <script> var video = document.getElementsByTagName('video')[0]; var hello = document.getElementById('hello'); var hellostart = hello.getAttribute('data-starttime'); var helloend = hello.getAttribute('data-endtime'); video.ontimeupdate = function(e) { var hasHidden = hello.hasAttribute('hidden'); if (video.currentTime > hellostart && video.currentTime < helloend) { if (hasHidden) hello.removeAttribute('hidden'); } else { if (!hasHidden) hello.setAttribute('hidden', ''); } } </script></pre>

То есть, примерно так выглядит:

if (video.currentTime == 10){alert "Город Москва";}

Доброго дня!

спасибо за подсказку, тоже нашла подобную статью с использованием video.currentTime.

Но возникает вопрос, не возникнет ли такая ситуация: когда браузеры по разному высчитывают время или если комп подтормаживает, получается будут задержки во времени и сроки видео будут не соответствовать скрипту, возможно такое?


  • 0

#4 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 1015
    3 690 сообщ.

Отправлено 17 Февраль 2017 в 11:04

Теоретически возможно всё. Практически - надо тестировать. Но не должно.

Можно при достижение времени нажимать паузу. Тогда проблемы при торможение немного уменьшатся.


  • 0



Похожие темы Свернуть

Статистика

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей