You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#105862 Autoplay video and mouse hover sound

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by ant on Wednesday, 11 November 2020 07:36 GMT

ant
Hi Ryan, is it possibile for an autoplay mp4 file to get sound only with mouse hover? I mean that on loading page the file plays with no sound (volume 0), when mouse is hover the video, the volume goes to 70%.
Regards

Ryan
You would need some additional javascript to do this. You could try the following jQuery script (not tested!), where "video_id" is the id attribute value of the video:

jQuery(document).ready(function($) {
    $('#video_id').on('mouseover', function() {
        this.volume = 0.75;
    }).on('mouseout', function() {
        this.volume = 0;
    }).get(0).volume = 0;
});

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

ant
Hi
thanks a lot for your suggestion.
Please, let me know if it is correct how I assigned the attribute to the mp4 file into attached image.

I'm trying to add the script using Regularlabs Sourcerer plugin but I get only text after insert. have I to change settings in JCE?
Reagards

Attachments

Ryan
Please, let me know if it is correct how I assigned the attribute to the mp4 file into attached image.
No, in the Advanced tab, set the ID attribute to "video_volume" or anything else, then use that value for the "video_id" part of the script. For example, if you set the ID value in the Advanced tab to "video_volume", then the script would be:

jQuery(document).ready(function($) {
    $('#video_volume').on('mouseover', function() {
        this.volume = 0.7;
    }).on('mouseout', function() {
        this.volume = 0;
    }).get(0).volume = 0;
});
I'm trying to add the script using Regularlabs Sourcerer plugin but I get only text after insert. have I to change settings in JCE?
It's not ideal, but you can just add the script to your content before or after the video. If Allow Javascript is enabled in Editor Profiles -> Editor Parameters -> Advanced, then paste in the following:

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('#video_volume').on('mouseover', function() {
        this.volume = 0.7;
    }).on('mouseout', function() {
        this.volume = 0;
    }).get(0).volume = 0;
});
</script>

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

ant
Great! It works fine. Thanks again.

Sorry if I take this opportunity, is it possible to gradually increase the volume and gradually decrease the volume at the entry and exit of the mouse?

Ryan
Try this (from https://stackoverflow.com/questions/7451508/html5-audio-playback-with-fade-in-and-fade-out) :

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('#video_volume').on('mouseover', function() {
        $(this).animate({volume: 0.7}, 1000);
    }).on('mouseout', function() {
        $(this).animate({volume: 0}, 1000);
    }).get(0).volume = 0;
});
</script>
The 1000 value is equivalent to 1 second, which is the fade in/out time, so adjust as required. FYI - without the fade in/out, you could probably do this without the extra javascript, but just with event attributes, eg:

<video src="https://www.joomlacontenteditor.net/video.mp4" onmouseover="this.volume=0.7;" onmouseout="this.volume=0;" onloadedmetadata="this.volume=0;"></video>

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

ant
Thanks a lot.