Оверлей кнопка на видео HTML5 video overlay play button

Оверлей кнопка на видео HTML5 video overlay play button Когда нужно вставить видео на сайт, хочется поверх него показать кнопку Play. Видео вставляем не с Youtube, а при помощи тега <video>

html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <video class="video">
        <source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
    </video>
  <div class="playpause"></div>
</div>
 
Css:
.video {
    width: 100%;
    border: 1px solid black;
}
.wrapper{
    display:table;
    width:auto;
    position:relative;
    width:100%;
}
.playpause {
    background-image:url(http://png-4.findicons.com/files/icons/2315/default_icon/256/media_play_pause_resume.png);
    background-repeat:no-repeat;
    width:50%;
    height:50%;
    position:absolute;
    left:0%;
    right:0%;
    top:0%;
    bottom:0%;
    margin:auto;
    background-size:contain;
    background-position: center;
}
 
js:
$('.video').parent().click(function () {

  if($(this).children(".video").get(0).paused){       
 $(this).children(".video").get(0).play();   
$(this).children(".playpause").fadeOut();

    }else{      
 $(this).children(".video").get(0).pause();

  $(this).children(".playpause").fadeIn();

    }

});
 
 
 
Источник: loco.ru

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (0)     Подпишитесь на RSS комментариев к этой статье.