Nút Phát Lớp phủ qua video

Question

Tôi hiện đang có một tập lệnh phát và tạm dừng một video đang bật. Điều tôi muốn làm là phủ một nút phát qua video lúc bắt đầu và khi video bị tạm dừng và cho cùng một nút đó biến mất khi video phát lại.

Mọi đề xuất sẽ được đánh giá cao.

HTML

<video class="video"><source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4"> 
</video> 

CSS

.video { 
width: 50%; 
border: 1px solid black; 
} 

JS

// Plays and pauses video on click 

$('.video').click(function(){this.paused?this.play():this.pause();}); 

Answer 1

Tôi nghĩ rằng tôi sẽ chỉ cần phải giải thích điều này.

khi .video được nhấp và video bị tạm dừng ->
.video{visibility: hidden;}
khi .video được nhấp và video đang chạy ->
.video{visibility: visible;}

Nếu bạn muốn mã thêm, vui lòng bình luận

Answer 2

Nếu bạn muốn có lớp phủ thực sự với nội dung bạn có thể chỉnh sửa, có thể điều này sẽ phù hợp với bạn: https://jsfiddle.net/svArtist/9ewogtwL/

$('.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(); 
 
    } 
 
});

.video { 
 
    width: 100%; 
 
    border: 1px solid black; 
 
} 
 
.wrapper{ 
 
    display:table; 
 
    width:auto; 
 
    position:relative; 
 
    width:50%; 
 
} 
 
.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; 
 
}

<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>

Answer 3

Khi được nhấp toggling sẽ làm việc tốt quá ... và nó sẽ làm giảm mã jQuery. .toggle()