|
| Дата |
|
USD/RUB | 93.7196 | BTC/USD | 61191.5984 |
|
|
|
Скрипты, программы и технические решения Обсуждаем скрипты, программы и новые технологии. |
10.12.2014, 04:18
|
#1
|
Senior Member
Регистрация: 12.01.2009
Сообщений: 532
Бабло: $108200
|
Как превратить 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 - заранее спасибо за подсказку.
|
|
|
10.12.2014, 08:14
|
#2
|
Senior Member
Регистрация: 05.01.2008
Сообщений: 1,676
Бабло: $213930
|
не шарю в теме, но а если пробовать накрыть видео прозрачным дивом на который уже прикрутить onclick ?
|
|
|
10.12.2014, 13:33
|
#3
|
Senior Member
Регистрация: 12.01.2009
Сообщений: 532
Бабло: $108200
ТС -->
|
ТС
Цитата:
Сообщение от creator123
не шарю в теме, но а если пробовать накрыть видео прозрачным дивом на который уже прикрутить onclick ?
|
Третье предложение первого поста:
Цитата:
...не вспывающий кликабельный html элемент над видео ...
|
|
|
|
10.12.2014, 16:22
|
#4
|
Senior Member
Регистрация: 19.04.2007
Сообщений: 2,393
Бабло: $314345
|
Цитата:
Сообщение от klim
Третье предложение первого поста:
|
Так див и не будет "всплывающим", он будет невидимым, юзер не поймет, что есть покрывало над роликом. Такой костыль часто юзается, когда надо считать клики по флеш баннерам не юзая встроенные параметры баннеров. Почему так не пойдет?
|
|
|
10.12.2014, 17:26
|
#5
|
Senior Member
Регистрация: 12.01.2009
Сообщений: 532
Бабло: $108200
ТС -->
|
ТС
Цитата:
Сообщение от 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>
|
|
|
14.12.2014, 00:47
|
#6
|
Senior Member
Регистрация: 12.01.2009
Сообщений: 532
Бабло: $108200
ТС -->
|
ТС
Отоспался, позагорал, поплавал в море, покурил 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>
|
|
|
Опции темы |
|
Опции просмотра |
Линейный вид
|
|