it-swarm.com.de

Überlagerungstaste über Video

Ich habe derzeit ein Skript, das ein Video onclick abspielt und anhält. __ Ich möchte, dass beim Start und bei Pause eine Wiedergabetaste über dem Video eingeblendet wird, und dass die gleiche Schaltfläche beim Abspielen des Videos nicht mehr angezeigt wird nochmal.

Anregungen werden gebeten.

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();});
12
Sam Pittman

Wenn Sie ein aktuelles Overlay mit Inhalten haben möchten, die Sie bearbeiten können, ist dies möglicherweise für Sie geeignet: 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>

29
Ben Philipp

Ich denke, ich muss das nur erklären.

wenn auf .video geklickt wird und das Video angehalten wird ->
.video{visibility: hidden;}
wenn auf .video geklickt wird und das Video läuft ->
.video{visibility: visible;} 

Wenn Sie mehr Code wünschen, kommentieren Sie bitte

1
Julian Avar

Beim Klicken funktioniert das Umschalten auch gut ... und reduziert den jQuery-Code. .toggle()

0