Как превратить html5 video тэг в кликабельный баннер?

[klim]

Есть какое-нибудь несложное решение/jquery либа? При клике на играющем ролике нужно перенаправление на урл. Не рекламный пре-ролл для другого видео, не вспывающий кликабельный html элемент над видео. Просто юзер кликает по играющему видео - и переходит по моему урлу.

Собрал с просторов stackoverflow jquery костыль, который при нажатии на паузу перенаправляет юзера, но чувсвую, что это при допиливании будет хрень полная для кроссбарузерной совместимости

PHP код:

     <script type="text/javascript">
      $(document).ready(function(){   
       $("#myVideo").bind('pause', function(){
          location.href="http://www.localhost.com";   
       }); 
      });
    </script> 

    <video id="myVideo" и так далее........ 


Гуру JS - заранее спасибо за подсказку.

[creator123]

не шарю в теме, но а если пробовать накрыть видео прозрачным дивом на который уже прикрутить onclick ?

[klim]

Сообщение от creator123

не шарю в теме, но а если пробовать накрыть видео прозрачным дивом на который уже прикрутить onclick ?

Третье предложение первого поста:

...не вспывающий кликабельный html элемент над видео ...

[DimaX]

Сообщение от klim

Третье предложение первого поста:

Так див и не будет "всплывающим", он будет невидимым, юзер не поймет, что есть покрывало над роликом. Такой костыль часто юзается, когда надо считать клики по флеш баннерам не юзая встроенные параметры баннеров. Почему так не пойдет?

[klim]

Сообщение от DimaX

Так див и не будет "всплывающим", он будет невидимым, юзер не поймет, что есть покрывало над роликом. Такой костыль часто юзается, когда надо считать клики по флеш баннерам не юзая встроенные параметры баннеров. Почему так не пойдет?

Плохо разбираюсь в js, у меня есть подобный код с прозрачным дивом, проблемы следующие: 1) дефолтный андроидный браузер при клике на видео ставится на паузу и перенаправляет юзера, но обратно с паузы не снимается (родные control отключены) 2) постоянно наблюдаются мелкие косяки-перекосы в bootstrap'e и foundation'е. Как счетчик кликов div мне не нужен, у меня перенаправление на внутряк с параметрами.
Как мне показалось, jquery очень хорошо заточен под все ходовые мобильные браузеры, на него и ориентируюсь

Вот сам код со стэковерфлоу

PHP код:


  <script type="text/javascript">
    var overlay = document.getElementById('transparent-div'); // прозрачный перекрывающий див
    var video = document.getElementById('my-video'); // <video>
    var videoPlaying = false;
    overlay.onclick = function() {
        if (videoPlaying) {
            window.open("http://ya.ru");
            video.pause();
            videoPlaying = false;
            
        }
        else {
            video.play();
            videoPlaying = true;
        }
    }
  </script>

    <style type="text/css">
      #my-video {        // <video>
          position: absolute;
          top: 0;
          left: 0;
      }
      #transparent-div { // прозрачный перекрывающий див
          position: absolute;
          top: 0;
          left: 0;
          width: 320px;
          height: 240px;
          cursor: pointer;
      }
    </style> 


[klim]

Отоспался, позагорал, поплавал в море, покурил JS.
Кому нужно - относительно работоспособный код:

PHP код:


<video poster="pic.jpg" id="video" loop autoplay>.....</video>
// poster - превьюшка, наложите на неё кнопку проигрывателя
// loop - зацикливание, не работает на некоторых версиях дефолтного андроидного браузера (решено с помощью JS). На десктопах работает по умолчанию.
// autoplay - автопроигрывание, по умолчанию не работает на всех мобильных платформах, для мотивации действия "нажать" используйте poster. На десктопах работает по умолчанию.

      <script type="text/javascript">
        window.onload=function(){
          var videoPlayer= document.getElementById("video"); // id=""video
           
          videoPlayer.addEventListener("click", function(){ //кликаем по video тэгу
            if(this.paused){ //запускаем видео, если оно не проигрывается
              this.play();
            }
            else{ // запускаем нужное действие при клике на работающее видео
             //this.pause(); // мобильный хром/дефолтный андроидный вебкит и без этой строки встают на паузу, для хрома треба ещё раз кликнуть по видео для запуска, а вэбкит запустится только если перевернуть экран ((, но пох, главное, что срабатывает следующая строчка
              window.open("http://ya.ru"); //сливаем юзера
            }
          }, false);

          
         // если дефолтное зацикливание (loop в тэге video) баннера не сработало, обходим средствами js. Пусть баннер крутится.
          videoPlayer.addEventListener("ended", function(){
            this.play();
          }, false);
         
        }//  
      </script>