브라우저 제목

샘플

http://comlearn.co.kr/project1/mobile/video.html

html

<!doctype html>   
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>모바일부터 데스크탑 반응</title>
        
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <!-- 사용자 css  -->
        <link rel="stylesheet" href="css/video.css">
        <style>
        
        </style>
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="js/video.js"></script>
        <script>
        
        </script> 
    </head>
    <body>
        
            <div class="wrap">
                <div class="section-wrap">
                    <div class="section">
                        <div class="movie">
                            <video controls class="video" id="video">
                                <source src="media/Hand.mp4" type="video/mp4">
                            </video>
                            <button class="bt" >
                                <span class="play">
                                    <i class="fa fa-pause-circle-o"></i>
                                </span>
                            </button>
                            <button class="mute">
                                <i class="fa fa-volume-off vicon"></i>
                                <input type="range" value="0.2"  max="1" step="0.01" id="volume">
                            </button>
                            
                        </div>
                        <h3>비디오</h3>
                        
                    </div>
                    
                </div>


            </div>
        
    </body>
</html>

 

 

css

 

@charset "utf-8"; 
html,body{
    margin:0;
    height:100%;
    background:#eeeeee;
}

.wrap{
    width:100%;
    height:100%;
    
    position:relaive;
    float:left;
    
    overflow:auto;
    background:red;
     scrollbar-width:none;  /* fire-fox */
    -ms-overflow-style:none; /* ie and edge */
    
}
.wrap::-webkit-scrollbar{
  display:none;
}

.section-wrap{
    width:400%;
    height:100%;
    position:relative;
    left:0;
    
}

.section{
    width:25%;
    height:100%;
    float:left;
    background:yellow;
    position:relative;
    left:0;
    display:flex;
    justify-content: center;
    align-items: center;
    color:white;
    
}

.section:first-child{
    background:url(../images/background1.jpg) no-repeat center;
    background-size:cover;
    background-attachment: fixed;
}


.movie{
    width:100%;
    height:100%;
    border:1px solid black;
    position:relative;
    left:0;
    top:0;
    overflow:hidden
    
}
.video{
    position:absolute;
    right:0;
    min-width:100%;
    min-height:100%;
    

}
.section h3{
    position:absolute;
    top:50px;;
    z-index:9; 
}
.bt{
    position:absolute;
    width:100%;
    height:100%;
    font-size:15vw;
    background:transparent;
    color:white;
    border:none;
    opacity:1;

}
.play{
    opacity:0;
    transition:0.5s;
}
.mute{
    position:absolute;
    bottom:50px;
    right:50px;
    display:none;
    
}
#volume {
    -webkit-appearance: none;
    border: 1px solid black;
    position: absolute;
    display: block;
    width: 0;
    height: 15px;
    transition:0.5s;
    visibility:hidden;
    white-space:nowrap;
    overflow:hidden;
    

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background-color: #999;
    left: 7px;
    bottom:10px;

    -webkit-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
    -moz-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
    box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
    transform:rotate(-90deg);
    transform-origin: 0;
}

input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border:1px solid black;

    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #80e4df; /* Old browsers */
    background: -webkit-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);

    background: -moz-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
    background: -o-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
    background: linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%); /* W3C */
}
 

 

js

 

$(function(){
    var sw=true;
    var video1=document.getElementById("video");
    $(".play").hover(
        function(){
            console.log("over되었어요")
            $(".play").css({opacity:1});
        },
        function(){
            console.log("out되었어요")
            $(".play").css({opacity:0});
        }
        
    );
    
    $(".play").on('click',function(){
        if(video.paused){
            video1.play();
            console.log("플레이");
            $(this).html('<i class="fa fa-pause-circle-o"></i>');
            $(".mute").fadeIn();
        }else{
            video1.pause();
            console.log("멈춤");
            $(this).html('<i class="fa fa-play-circle-o"></i>');
            $(".mute").fadeOut();
        }
    });
    
    video1.volume=0.2;
    $("#volume").on('input',function(){
       var vol=parseFloat($("#volume").val());
        console.log(vol);
        video1.volume=vol;
    });
    $(".mute").hover(
        function(){
            $("#volume").css({
                width:150,
                visibility:"visible"
            });
        },
        function(){
            $("#volume").css({
                width:0,
                visibility:"hidden"
            });
        }
    );

});

 

제목 날짜
회원가입 페이지 2020.02.07
포트폴리오 샘플 2020.05.21
페이지에서 화살표를 클릭하면 특정위치로 애니메이션되면서 이동, 네비 해시 애니메이션 scroll spy 2020.03.07
패밀리 사이트 이동 2020.03.07
테이블1 2020.02.04
터치이벤트, pc환경과 모바일 환경 알아내기 file 2020.05.04
터지이벤트와 mouseup, mousedown이벤트 2020.03.28
탭 만들기 2020.03.07
코르도바 를 설정하기 위한 방법 file 2020.04.26
첫번째 태그 코드 2020.01.14
좌/우 슬라이드 슬라이드 개수처리, 너비 처리 file 2020.04.02
자격증 파일 file 2020.02.27
자격증 슬라이드 기본 2020.03.30
자격증 3일차 공지사항, 갤러리 css file 2020.03.03
자격증 2일차 file 2020.02.27
우리집 야용이 페이지-4 file 2020.01.30
우리집 야옹이 페이지-1 file 2020.01.23
우리집 고양이-6 2020.02.03
우리집 고양이-2 file 2020.01.28
우리집 고양이 페이지-5 2020.01.31
태그 목록