Html5 video player customize to only show play and mute

i’m trying to add some controls to a HTML5 video player that is used by Layerslider wordpress plugin. You can add some custom HTML to each layer and you can also add javascript. But the mute button does not work 🙁 Anything wrong with the code or does anyone have any suggestions on how to make this work?? I also tried loading the javascript on the page seperatly.

Thanks in advance.

Related url: http://www.welzendesign.com/startransfer/

toggle

<style>.mute-video {
    background:url(https://cdn.flaticon.com/png/64/60750.png) no-repeat center;
    background-size:32px;
    border:0;
    width:32px;
    height:32px;
    text-indent:-999px;
}
.unmute-video {
    background:url(https://cdn.flaticon.com/png/64/498.png) no-repeat center;
    background-size:32px;
}</style>

<script> a"$("video").prop('unmuted', true);

$(".mute-video").click(function () {
    if ($("video").prop('muted')) {
        $("video").prop('muted', false);
        $(this).addClass('unmute-video');

    } else {
        $("video").prop('muted', true);
        $(this).removeClass('unmute-video');
    }
    console.log($("video").prop('muted'))
}); </script>


Source: javascript

Leave a Reply