Html5 视频播放器自定义只显示播放和静音

Question

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/

    <video id="myVideo" width="50%" height="50%" autoplay loop>
        <source src="/startransfer/wp-content/uploads/2015/10/StarTransfer-promo-aanhanger.mp4" type="video/mp4">
    </video>

    <button class="mute-video">toggle</button>

        <style>

.mute-video {
            background:url(http://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(http://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>

Answer 1

Inside the <script> tag copy/paste this (your code, which is correct), delete all the alerts and extra <script> tags and it should work just fine.

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

Answer 2

This was the correct answer if anyone else has this problem:

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

        } else {
            jQuery("video").prop('muted', true);
            jQuery(this).removeClass('unmute-video');
        }
    });
}