Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #514588

    Hi,

    I need my video in layerslider to play without controls and I need just a button that users can use to mute the video. Also i want the video on loop. I managed to accomplice all this but the problem is the javascript does not work when I put in in a custom layer in Layerslider.

    Here is an example i made to showcase what i mean: https://jsfiddle.net/6cc9mhbb/23/

    Do you guys know where i need to put the javascript in order to work?

    Thanks in advance!!!

    • This topic was modified 9 years ago by vonwelzen.
    #514938

    Hey vonwelzen,

    Did you try to put it inside a textblock on the page? Please send us a temporary admin login so that we can have a closer look if you should have any further problems. You can post the details in the Private Content section of your reply.

    Best regards,
    Rikard

    #515075

    Yes i also tried it in a textblock. I put a dummy video in it to get it to work. In de private section there is a login so you guys can check it out.

    • This reply was modified 9 years ago by vonwelzen.
    #515347

    I also got some information from the guys at layer slider themselves. they told me this:

    Hello,

    You need to put the HTML to an “HTML / Video / Audio” layer, the CSS into the CSS Editor that can be found on the WP sidebar and the javascript code into a callback function or you can use a delegated event with the jQuery .on() function.


    Kind Regards,
    Attila – Kreatura Media Support

    I don’t know the correct markup for this function jQuery .on() function. Could you guys help in this matter?

    • This reply was modified 9 years ago by vonwelzen.
    #515469

    They also send me this. I tried to copy past the exact code snippet in the callback function but i still can’t get it to work.

    You can mute your video by default with the ‘muted’ attribute:

    Using jQuery’s .on() method should look like this:

    $(document).on(‘click’, ‘.mute-video’, 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’))
    });

    Please note that WordPress uses jQuery’s .noConflict() mode, so you might need to use the ‘jQuery’ keyword instead of the dollar ($) sign.

    You can place the above JavaScript code wherever you want to add it, or leave it in the cbInit callback. Using the .on() method will ensure that the event handler will execute even if videos added/removed later. Due to this behavior you might want to use a more specific selector instead of just $(‘video’). For example $(‘.ls-slide video’) will find only the videos inside a slider.

    #519178

    Hey!

    sorry for the late reply and unfortunately we can’t help you with this, as it is out of our support scope, as written in our support policy. You would need to hire a freelance developer for this job and you could find one for example here: http://kriesi.at/contact/customization

    Cheers!
    Andy

    #519184

    This is the answer: for anyone who has the problem as well:

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

    #519204

    Hey!

    thanks a lot for sharing your solution!
    Feel free to open a new ticket if you have some more questions about the theme. We are happy to assist you.

    Best regards,
    Andy

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Layerslider custom mute button on video’ is closed to new replies.