Local Overrides Sample: Add Buttons to Playback Controls

This script will add some buttons to the playback controls bar at the bottom of the video player. These buttons specifically are only shown when not viewing live video.

To learn more about ui3-local-overrides, see: Local Overrides Scripts and Styles

In this example script, we add buttons to skip back 1 second, ahead 1 second, back 10 frames, ahead 10 frames. Additionally, hotkeys are created for the latter two.

ui3-local-overrides.js

addPlaybackControlsButton('Skip Back 1 Second',
	'<svg class="icon noflip"><use xlink:href="#svg_mio_replay"></use></svg><div class="centerText">1s</div>',
	function ()
	{
		if (!videoPlayer.Loading().image.isLive)
			videoPlayer.SeekByMs(-1000, false);
	});

addPlaybackControlsButton('Skip Ahead 1 Second',
	'<svg class="icon noflip invertv"><use xlink:href="#svg_mio_replay"></use></svg><div class="centerText">1s</div>',
	function ()
	{
		if (!videoPlayer.Loading().image.isLive)
			videoPlayer.SeekByMs(1000, false);
	});

addPlaybackControlsButton('Skip Back 10 Frames',
	'<svg class="icon noflip"><use xlink:href="#svg_mio_replay"></use></svg><div class="centerText">10</div>',
	function ()
	{
		if (!videoPlayer.Loading().image.isLive)
			videoPlayer.SeekByMs(-10 * videoPlayer.GetExpectedFrameIntervalOfCurrentCamera(), false);
	},
	{
		// This argument adds a hotkey to perform the button action
		binding: "0|0|0|78|N",
		id: "skip_back_10_frames"
	});

addPlaybackControlsButton('Skip Ahead 10 Frames',
	'<svg class="icon noflip invertv"><use xlink:href="#svg_mio_replay"></use></svg><div class="centerText">10</div>',
	function ()
	{
		if (!videoPlayer.Loading().image.isLive)
			videoPlayer.SeekByMs(10 * videoPlayer.GetExpectedFrameIntervalOfCurrentCamera(), false);
	},
	{
		// This argument adds a hotkey to perform the button action
		binding: "0|0|0|77|M",
		id: "skip_ahead_10_frames"
	});

function addPlaybackControlsButton(title, content, onclick, hotkey)
{
	var btn = $('<div class="pcButton hideWhenLive skipbtn" title="' + title + '">' + content + '</div>')
	btn.on('click', onclick);
	$("#volumeBar").before(btn);

	if (hotkey)
	{
		defaultSettings.push({
			key: "ui3_hotkey_custom_pc_btn_" + hotkey.id
			, value: hotkey.binding
			, hotkey: true
			, label: title
			, actionDown: onclick
			, category: "Hotkeys"
		});
	}
}