Instantly share code, notes, and snippets.

Embed
What would you like to do?
Flowplayer speed buttons to switch video speed for https://wordpress.org/plugins/flowplayer5/ v1.11.1
<?php
/*
Plugin Name: Flowplayer speed buttons
Plugin URI: https://gist.github.com/grappler/02b9d43c0606d74869a1
Description: Add buttons to adjust the speed of the video. The styles are added in the child theme
Version: 0.1.0
Author: Ulrich Pogson
Author URI: https://ulrich.pogson.ch/
License: GPLv2
License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html
*/
function juanmaguitar_video_speed( $video_data_config, $video_id ) {
// Only add to specific video ids
if ( '2161' === $video_id ) {
$video_data_config['speeds'] = '[0.25, 0.5, 1.0, 1.5, 2.0]';
}
return $video_data_config;
}
add_filter( 'fp5_video_data_config', 'juanmaguitar_video_speed', 10, 2 );
function juanmaguitar_speed_buttons( $video_id ) {
// Add the speed buttons to the specific videos
if ( '2161' === $video_id ) {
echo '<div class="fp5-speed-buttons">
<span>0.25x</span>
<span>0.5x</span>
<span class="fp5-speed-active">1x</span>
<span>1.5x</span>
<span>2x</span>
</div>';
}
}
add_action( 'fp5_video_bottom', 'juanmaguitar_speed_buttons' );
function juanmaguitar_inline_script() {
$js = 'flowplayer(function(api,root){var speedelement=root.querySelector(".fp5-speed-buttons"),buttons=Array.prototype.slice.call(speedelement.getElementsByTagName("span"));api.on("load",function(e,api){if(api.engine.engineName=="flash"||!flowplayer.support.inlineVideo){speedelement.parentNode.removeChild(speedelement);}}).on("speed",function(e,api,rate){var i;speedelement.querySelector(".fp5-speed-active").removeAttribute("class");for(i=0;i<api.conf.speeds.length;i=i+1){if(api.conf.speeds[i]==rate){buttons[i].className="fp5-speed-active";break;}}});buttons.forEach(function(button){button.onclick=function(){var i;if(button.classNme!="fp5-speed-active"){for(i=0;i<api.conf.speeds.length;i=i+1){if(buttons[i]===button){api.speed(api.conf.speeds[i]);break;}}}};});});';
wp_add_inline_script( 'flowplayer5-script', $js );
}
add_action( 'wp_enqueue_scripts', 'juanmaguitar_inline_script' );
// global speed widgets setup applying to all players on page
flowplayer(function (api, root) {
var speedelement = root.querySelector(".fp5-speed-buttons"),
// turn button elements into an indexable array
buttons = Array.prototype.slice.call(speedelement.getElementsByTagName("span"));
api.on("load", function (e, api) {
// remove speed buttons if playback rate changes are not available
if (api.engine.engineName == "flash" || !flowplayer.support.inlineVideo) {
speedelement.parentNode.removeChild(speedelement);
}
}).on("speed", function (e, api, rate) {
// mark the current speed button as active
var i;
speedelement.querySelector(".fp5-speed-active").removeAttribute("class");
for (i = 0; i < api.conf.speeds.length; i = i + 1) {
if (api.conf.speeds[i] == rate) {
buttons[i].className = "fp5-speed-active";
break;
}
}
});
// bind speed() call to click on buttons
buttons.forEach(function (button) {
button.onclick = function () {
var i;
if (button.classNme != "fp5-speed-active") {
for (i = 0; i < api.conf.speeds.length; i = i + 1) {
if (buttons[i] === button) {
api.speed(api.conf.speeds[i]);
break;
}
}
}
};
});
});
/* initially hide speed buttons while they cannot be used */
.is-splash.flowplayer .fp5-speed-buttons, .is-loading.flowplayer .fp5-speed-buttons {
display: none;
}
.flowplayer .fp5-speed-buttons {
position: absolute;
right: 15px;
bottom: 40px;
z-index: 12; /* make clickable */
display: block;
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
.is-mouseout.flowplayer .fp5-speed-buttons {
opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
/* same transition as other ui elements like fullscreen */
-webkit-transition: opacity .15s .3s;
-moz-transition: opacity .15s .3s;
transition: opacity .15s .3s;
}
.flowplayer .fp5-speed-buttons span {
padding: 1ex;
margin: 0.5ex;
width: 3em;
display: inline-block;
text-align: center;
font-weight: bold;
background-color: #eee;
cursor: pointer;
-webkit-border-radius: 1ex;
-moz-border-radius: 1ex;
border-radius: 1ex;
}
.flowplayer .fp5-speed-buttons span.fp5-speed-active {
color: #00a7c8;
background-color: #666;
cursor: default;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment