Question

我正在尝试为Layerslider wordpress插件使用的HTML5视频播放器添加一些控件。您可以为每个图层添加一些自定义HTML，也可以添加javascript。但静音按钮不起作用:(代码有什么问题，或者有没有人对如何使这项工作有任何建议？我也尝试在页面上单独加载javascript。

提前致谢。

相关网址：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

在<script>标记内复制/粘贴此代码（您的代码，这是正确的），删除所有警报和额外的<script>标记，它应该可以正常工作。

        $("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

如果其他人有这个问题，这是正确答案：

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

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

2 个答案: