Set a video playbackrate slider for you WordPress learndash videos. The playbackRate property for the audio & video elements allows changing the speed or rate, at web audio or video is playing. video playbackrate WordPress learndash will be an effective tool for presentation.
This is how you add video playbackrate WordPress learndash.
It will add a playbackrate slider below the video in WordPress learndash.
This should be the HTML of the video and it will also list range slider below the video:
<video id="videoElement" controls=controls>
<source type="video/mp4" src="your video URL"> //add the link of you video here.
</video>
<p class="controls">
<label>Playback Rate: <input type="range" step="0.1" min="0.5" max="2" value="1" id="rateSlider"></label> <span id="rateOutput" aria-live="polite">1</span>
</p>
Next we have to enqueue this script in footer for same page:
<script>
// Inline code is for educational purposes. Best practice is to put your scripts in external files.
(function() {
'use strict';
var video = document.getElementById("videoElement");
var rateOutput = document.getElementById('rateOutput');
var rateSlider = document.getElementById('rateSlider');
rateSlider.onchange = function(event) {
// When the slider is moved, changed the video's playback rate
video.playbackRate = rateSlider.value;
};
video.onplay = function(event) {
// We can only change the playbackRate once the video has started playing
video.playbackRate = rateSlider.value;
};
video.onratechange = function(event) {
// When the playback rate changes, display the new value
rateOutput.textContent = video.playbackRate;
// And let's have some colourful fun while we're here
//document.body.style.background = 'hsl(' + (video.playbackRate * 180) + ', 50%, 15%)';
};
rateOutput.textContent = rateSlider.value;
})();
</script>
add the script in footer or use wordpress plugin wp enqueue script to enqueue script.
How to Properly Add JavaScripts and Styles in WordPress
WordPress learndash developers sometimes need to add videoplayback to there WordPress videos and learndash courses. The viewer can slow down the video speed and watch it slowly if they find hard time catching up the instructions. In the same way video, playbackrate slider speeds up the video up to 2 times if they want to complete the videos fast.
To need any customization in your WordPress website feel free to ask you questions in our chat box or write us.
