Форум успешных вебмастеров - GoFuckBiz.com

  Форум успешных вебмастеров - GoFuckBiz.com > Бизнес-решения > Скрипты, программы и технические решения
Дата
USD/RUB59.2760
BTC/USD0.0000
Скрипты, программы и технические решения Обсуждаем скрипты, программы и новые технологии.

Закрытая тема
Опции темы Опции просмотра
Старый 10.12.2014, 04:18   #1
klim
Senior Member
 
Аватар для klim
 
Регистрация: 12.01.2009
Сообщений: 364
Бабло: $85975
По умолчанию Как превратить html5 video тэг в кликабельный баннер?

Есть какое-нибудь несложное решение/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 - заранее спасибо за подсказку.
klim вне форума  
Старый 10.12.2014, 08:14   #2
creator123
Senior Member
 
Аватар для creator123
 
Регистрация: 05.01.2008
Сообщений: 1,576
Бабло: $184010
По умолчанию

не шарю в теме, но а если пробовать накрыть видео прозрачным дивом на который уже прикрутить onclick ?
creator123 вне форума  
Старый 10.12.2014, 13:33   #3
klim
Senior Member
 
Аватар для klim
 
Регистрация: 12.01.2009
Сообщений: 364
Бабло: $85975
ТС -->
автор темы ТС По умолчанию

Цитата:
Сообщение от creator123 Посмотреть сообщение
не шарю в теме, но а если пробовать накрыть видео прозрачным дивом на который уже прикрутить onclick ?
Третье предложение первого поста:
Цитата:
...не вспывающий кликабельный html элемент над видео ...
klim вне форума  
Старый 10.12.2014, 16:22   #4
DimaX
Senior Member
 
Регистрация: 19.04.2007
Сообщений: 2,272
Бабло: $294990
По умолчанию

Цитата:
Сообщение от klim Посмотреть сообщение
Третье предложение первого поста:
Так див и не будет "всплывающим", он будет невидимым, юзер не поймет, что есть покрывало над роликом. Такой костыль часто юзается, когда надо считать клики по флеш баннерам не юзая встроенные параметры баннеров. Почему так не пойдет?
DimaX вне форума  
Старый 10.12.2014, 17:26   #5
klim
Senior Member
 
Аватар для klim
 
Регистрация: 12.01.2009
Сообщений: 364
Бабло: $85975
ТС -->
автор темы ТС По умолчанию

Цитата:
Сообщение от 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 вне форума  
Старый 14.12.2014, 00:47   #6
klim
Senior Member
 
Аватар для klim
 
Регистрация: 12.01.2009
Сообщений: 364
Бабло: $85975
ТС -->
автор темы ТС По умолчанию

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

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

      
<script type="text/javascript">
        
window.onload=function(){
          var 
videoPlayerdocument.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> 
klim вне форума