15s back/skip buttons on player

download_mediaplayer_plugins.php

@@ -0,0 +1,25 @@
+<?php
+  $pluginBaseUrl = 'https://github.com/mediaelement/mediaelement-plugins/raw/master/dist/';
+  $plugins = ['airplay' => ['airplay.svg', 'airplay.png'], 
+    'chromecast' => ['chromecast.svg', 'chromecast.png'], 
+    'context-menu' => [], 
+    'jump-forward' => ['jumpforward.svg', 'jumpforward.png'], 
+    'skip-back' => ['skipback.svg', 'skipback.png']];
+
+  $js = '';
+  $css = '';
+ 
+  foreach($plugins as $plugin => $resources) {
+    $js .= file_get_contents($pluginBaseUrl . $plugin . '/' . $plugin . '.min.js');
+    $css .= file_get_contents($pluginBaseUrl . $plugin . '/' . $plugin . '.min.css');
+
+    foreach($resources as $resource) {
+        file_put_contents('public/css/' . $resource,
+            file_get_contents($pluginBaseUrl . $plugin . '/' . $resource));
+    }
+  }
+
+  file_put_contents('public/js/mediaplayer_plugins.min.js', $js);
+  file_put_contents('public/css/mediaplayer_plugins.min.css', $css);
+
+?>

public/css/airplay.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="17" height="14" viewBox="0 0 16.9 13.9"><defs><style>.fill{fill:#fff;}</style></defs><title>7</title><g id="airplay"><polygon class="fill" points="0 0 16.9 0 16.9 10.4 13.2 10.4 11.9 8.9 15.4 8.9 15.4 1.6 1.5 1.6 1.5 8.9 5 8.9 3.6 10.4 0 10.4 0 0"/><polygon class="fill" points="2.7 13.9 8.4 7 14.2 13.9 2.7 13.9"/></g></svg>

public/css/chromecast.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.3 13.4" x="0" y="0" width="17" height="14"><defs><style>.cls-1{fill:#fff;}</style></defs><title>5</title><path id="chromecast" class="cls-1" d="M80.4,13v2.2h2.2A2.22,2.22,0,0,0,80.4,13Zm0-2.9v1.5a3.69,3.69,0,0,1,3.7,3.68s0,0,0,0h1.5a5.29,5.29,0,0,0-5.2-5.2h0ZM93.7,4.9H83.4V6.1a9.59,9.59,0,0,1,6.2,6.2h4.1V4.9h0ZM80.4,7.1V8.6a6.7,6.7,0,0,1,6.7,6.7h1.4a8.15,8.15,0,0,0-8.1-8.2h0ZM95.1,1.9H81.8a1.54,1.54,0,0,0-1.5,1.5V5.6h1.5V3.4H95.1V13.7H89.9v1.5h5.2a1.54,1.54,0,0,0,1.5-1.5V3.4A1.54,1.54,0,0,0,95.1,1.9Z" transform="translate(-80.3 -1.9)"/></svg>

public/css/jumpforward.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 19" x="0" y="0" width="19" height="19"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-width:2px;}</style></defs><title>2</title><g id="jumpforward"><path class="cls-1" d="M32.1,2.3L27.8,4.5V0.2Z" transform="translate(-20.7 -0.2)"/><path class="cls-1" d="M34.8,2.3L30.5,4.5V0.2Z" transform="translate(-20.7 -0.2)"/><path class="cls-2" d="M29.9,2.3a8.15,8.15,0,0,0-8.2,8.1h0" transform="translate(-20.7 -0.2)"/><path class="cls-2" d="M21.8,10a8.15,8.15,0,0,0,8.1,8.2h0" transform="translate(-20.7 -0.2)"/><path class="cls-2" d="M29.5,18.2a8.15,8.15,0,0,0,8.2-8.1h0" transform="translate(-20.7 -0.2)"/></g></svg>

public/css/mediaplayer_plugins.min.css

@@ -0,0 +1 @@
+.mejs-airplay-button>button,.mejs__airplay-button>button{background:url(airplay.svg) no-repeat 0 4px}.mejs-airplay-button>button .fill,.mejs__airplay-button>button .fill{fill:#fff}.mejs-airplay-button>button.active .fill,.mejs__airplay-button>button.active .fill{fill:#66a8cc}.mejs-chromecast-button>button,.mejs__chromecast-button>button{--disconnected-color:#fff;background:none;display:inline-block}.mejs-chromecast-container,.mejs__chromecast-container{background:#000;color:#fff;font-size:10px;left:0;padding:5px;position:absolute;top:0;z-index:1}.mejs-chromecast-layer>img,.mejs__chromecast-layer>img{left:0;position:absolute;top:0;z-index:0}.mejs-chromecast-icon,.mejs__chromecast-icon{background:url(chromecast.svg) no-repeat 0 0;display:inline-block;height:14px;margin-right:5px;width:17px}.mejs-contextmenu,.mejs__contextmenu{background:#fff;border:1px solid #999;border-radius:4px;left:0;padding:10px;position:absolute;top:0;width:150px;z-index:1}.mejs-contextmenu-separator,.mejs__contextmenu-separator{background:#333;font-size:0;height:1px;margin:5px 6px}.mejs-contextmenu-item,.mejs__contextmenu-item{color:#333;cursor:pointer;font-size:12px;padding:4px 6px}.mejs-contextmenu-item:hover,.mejs__contextmenu-item:hover{background:#2c7c91;color:#fff}.mejs-jump-forward-button>button,.mejs__jump-forward-button>button{background:url(jumpforward.svg) no-repeat 0 0;color:#fff;font-size:8px;line-height:normal;position:relative}.mejs-skip-back-button>button,.mejs__skip-back-button>button{background:url(skipback.svg) no-repeat 0 -1px;color:#fff;font-size:8px;line-height:normal;position:relative}

public/css/skipback.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-290 291 19 19" style="enable-background:new -290 291 19 19;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#fff;}
+	.st1{fill:none;stroke:#fff;stroke-width:2;}
+</style>
+<title>2</title>
+<g id="jumpforward">
+	<path class="st0" d="M-278.6,291v4.3l-4.3-2.2L-278.6,291z"/>
+	<path class="st0" d="M-281.3,291v4.3l-4.3-2.2L-281.3,291z"/>
+	<path class="st1" d="M-272.5,301.2L-272.5,301.2C-272.5,301.2-272.5,301.2-272.5,301.2c0-4.5-3.7-8.1-8.2-8.1"/>
+	<path class="st1" d="M-280.7,309L-280.7,309C-280.7,309-280.7,309-280.7,309c4.5,0,8.1-3.7,8.1-8.2"/>
+	<path class="st1" d="M-288.5,300.9L-288.5,300.9C-288.5,300.9-288.5,300.9-288.5,300.9c0,4.5,3.7,8.1,8.2,8.1"/>
+</g>
+</svg>

resources/views/widgets/mediaplayer.blade.php

@@ -5,23 +5,31 @@ if(!isset($MEDIAPLAYER_INCLUDED)):
 ?>
 	@push('scripts')
 	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelement-and-player.min.js"></script>
+        <script type="text/javascript" src="/js/mediaplayer_plugins.min.js"></script>
 	<script type="text/javascript">
 	  var pluginPath = 'https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/';
 	  $("audio").mediaelementplayer({
 	    pluginPath: pluginPath,
 	    stretching: 'responsive',
+            features: ['playpause','skipback','jumpforward','current','progress','duration','volume','airplay','chromecast'],
+            skipBackInterval: 15,
+            jumpForwardInterval: 15,
 	  });
 	  $("video").mediaelementplayer({
 	    pluginPath: pluginPath,
 	    videoWidth: '100%',
 	    videoHeight: '100%',
 	    enableAutosize: true,
+            features: ['playpause','skipback','jumpforward','current','progress','duration','volume','airplay','chromecast'],
+            skipBackInterval: 15,
+            jumpForwardInterval: 15,
 	  });
 	</script>
 	@endpush
 
 	@push('styles')
 	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelementplayer.css" />
+        <link rel="stylesheet" href="/css/mediaplayer_plugins.min.css" />
 	@endpush
 
 <?php endif; ?>