Slider Revolution WP
09.27.2016
Set Initial Volume for HTML5 Video
If you want to set an initial volume for HTML5 Video, this can be achieved by using the slider's API.
- Quick Tip
Click here to learn the differences between adding a video as a Slide's Main Background vs. adding it as a Content Layer.
1. Locate your slider's "revapi" number.
2. Modify the following JavaScript with your slider's API number (updating the "revapi44" part), and also adjust the "newVolume" number per code comments.
Code snippet for HTML5 Video added as a Content Layer
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* set volume below from 0-100, in increments of 10 (i.e. 10, 20, 30, etc.) */ var newVolume = 50; /* replace "revapi44" with your slider's API value */ /* https://www.themepunch.com/revslider-doc/slider-settings/#api */ revapi44.on('revolution.slide.layeraction', function(e, data) { if(data.eventtype === 'enteredstage' && data.layertype === 'video') { data.layer.find('.tp-volume-bar').attr('value', newVolume * 0.01); } }).on('revolution.slide.onvideoplay', function(e, data) { data.video.volume = newVolume * 0.01; }); |
Code snippet for HTML5 Video added as the slide's main background
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* set volume below from 0-100, in increments of 10 (i.e. 10, 20, 30, etc.) */ var newVolume = 50; /* replace "revapi44" with your slider's API value */ /* https://www.themepunch.com/revslider-doc/slider-settings/#api */ revapi44.on('revolution.slide.onvideoplay', function(e, data) { data.video.volume = newVolume * 0.01; }); |
3. Paste the JavaScript into your slider's "Custom JavaScript" section. as shown in the example screenshot below.
