Прикрепляем скрин видео к плееру moonwalk

Небольшой скрипт позволяющий прикреплять скрин видео к плееру moonwalk



В то место где должен выводиться плеер

html-код:

HTML:

<div class="video js-video" data-moonwalk="ссылка_на_видео">
<img class="video__img" src="ссылка_на_скрин" alt="" />
<div id="video__play"><div><i></i><b>Начать просмотр</b></div></div>
</div>

Далее сам скрипт устанавливаем перед закрывающим тегом </body>

js-код:

Code:

<script>
$(function(){
$("#video__play").click(function(){
        var dataMoonwalk = $(this).parents('.js-video').attr('data-moonwalk');
        $(this).parents('.js-video').html('<iframe src="'+ dataMoonwalk +'?autoplay=1" width="610" height="370" frameborder="0" allowfullscreen=""></iframe>')
    });
  
});
</script>

Ну и напоследок сами стили

css-код:

Code:

#video__play>div>i {
    position: absolute;
    display: block;
    content: " ";
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    top: 50%;
    left: 40px;
    margin-top: -1.5em;
    margin-left: -1em;
    border-right-width: 0;
    border-top-width: 1.5em;
    border-left-width: 2em;
    border-bottom-width: 1.5em;
    border-left-color: #ffffff;
}

#video__play>div {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -120px;
    margin-top: -40px;
    border: 1px solid #ffffff;
    font-weight: 700;
    color: #ffffff;
    font-size: 16px;
    font-family: Arial;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 240px;
    height: 80px;
    text-shadow: 1px 1px 3px #333;
}

#video__play>div:hover {
  background-color: rgba(0, 0, 0, 0.61);
}

#video__play {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
    cursor: pointer;
}

#video__play>div>b {
    position: relative;
    top: 30px;
    left: 75px;
    font-size: 15px;
}

 

Слушай а кодом нельзя немного внешний вид плеера поменят?

 

x360kg, с этим вопросом лучше обратиться к администрации moonwalk , сторонним методом боюсь это невозможно

 

Нет. Возможные варианты плеера можешь посмотреть в ЛК волков, на данный момент там есть несколько скинов, а так же можно цвета поменять на селекторы и т.д...

 

А на юкоз подобное есть?

 

Roman.U, данный скрипт подойдёт и для ucoz

 

я себе так сделал. а увидел это на сайте kinogb.co и от туда содрал

 

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

 

Romantv, можно код посмотреть , ото не совсем понял

 

чтоб колесики крутились так
<style>

#player {

background: #000 url(ссылка на колесики/load-player.gif) center center no-repeat
}






.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden
}
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0
}
.embed-responsive-16by9 {
padding-bottom: 56.25%
}
.embed-responsive-4by3 {
padding-bottom: 75%
}



</style>

<div id="player"><div class="embed-responsive embed-responsive-16by9"><div id="kino"></div>
</div></div>

у меня плеер еще скриптом выводится
<script type="text/javascript">function createPlayer_kinoveb(){var t=document.createElement("IFRAME");t.setAttribute("src","[xfvalue_url_video][xfgiven_georu]?block_ru=1[/xfgiven_georu][xfgiven_geouk]?block_ua=1[/xfgiven_geouk][xfgiven_season1]?season=[xfvalue_season1][/xfgiven_season1]"),t.frameBorder=0,t.setAttribute("allowfullscreen","true"),t.setAttribute("scrolling","no"),document.getElementById("kino").appendChild(t)}function addLoadEvent(t){var e=window.onload;"function"!=typeof window.onload?window.onload=t:window.onload=function(){e&&e(),t()}}addLoadEvent(function(){createPlayer_kinoveb()});</script>
тоже скопировал с сайта
этот див выводит плеер <div id="kino"></div>

 

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

 

да

 

Romantv, мне просто не понятна роль этой анимации.

 

внешний вид загрузки

 

Romantv, после нажатия на скрин , сразу подгружается плеер , зачем там ещё Ваша анимация

 

как тут вставить еще картинку kinoveb.tv/2935-horoshee-povedenie.html но чтоб осталась анимация

 

А зачем тебе на сайте этот чат с ботом?

 

для количества просмотров.он оправляет юзера на подборки за счет этого просмотров на хост 4

 

Romantv этоже просмотры.. они никакой роли не играют.. вот если бы оно считало уники так, то другое дело

 

играют! трафорет оплата очень как играет