JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.19.0/mediaelementplayer.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.19.0/mediaelement-and-player.min.js"></script>
<h1>MediaElement.js Video and Audio Example</h1>
<div class="wrapper">
  <h2>Video Example</h2>

  <video class="mejs-customize" controls>
    <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.mp4" type="video/mp4">
    <track label="English" kind="subtitles" srclang="en" src="assets/subtitles/bridge-captions.vtt" default>
  </video>

  <h2>Audio Example</h2>

  <audio class="mejs-customize" controls>
    <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge-audio.mp3" type="audio/mp3">
  </audio>
</div>

CSS

body {
  font-family: 'Helvetica', 'Arial', sans-serif;
  color: #384047;
}

.wrapper {
  max-width: 90%;
  margin: 10px auto;
  padding: 10px 20px;
  background: #f4f7f8;
  border-radius: 8px;
}

h1,
h2 {
  margin: 30px 0;
  text-align: center;
}

video,
audio {
  max-width: 100%;
}

video,
audio,
.mejs-customize {
  margin: 0 auto;
  display: block;
}


/* Customize Player */

.mejs-customize .mejs-controls {
  background: rgba(56, 64, 71, 0.98);
  height: 30px;
}

.mejs-customize .mejs-controls .mejs-button button {
  outline: none;
}

.mejs-customize .mejs-controls .mejs-captions-button {
  margin: 0 7px;
}

.mejs-customize .mejs-controls .mejs-captions-selector {
  background: rgba(56, 64, 71, 0.98);
  width: 100px;
  right: auto;
}

.mejs-customize .mejs-controls .mejs-time-rail {
  padding: 0;
}

.mejs-customize .mejs-controls .mejs-time-rail span {
  height: 100%;
  border-radius: 0px;
}

.mejs-customize .mejs-controls .mejs-time-rail .mejs-time-total,
.mejs-customize .mejs-controls .mejs-time-rail .mejs-time-loaded,
.mejs-customize .mejs-controls .mejs-time-rail .mejs-time-buffering,
.mejs-customize .mejs-controls .mejs-time-rail .mejs-time-handle {
  background: #2D3339;
  margin: 0;
}

.mejs-customize .mejs-controls .mejs-time-rail .mejs-time-current {
  background: #c0392b;
}

.mejs-container .mejs-controls .mejs-time-rail .mejs-time-total .mejs-time-float {
  border: none;
  background: none;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
  font-family: Helvetica, Arial, san-serif;
  font-size: 13px;
  color: #FFF;
}

JavaScript

$(function() {
  $('audio,video').mediaelementplayer({
    success: function(player, node) {
      $('#' + node.id + '-mode').html('mode: ' + player.pluginType);
    },
    features: ['playpause', 'progress', 'current', 'duration', 'tracks', 'volume', 'fullscreen'],
    startLanguage: 'en',
    translationSelector: true
  });
});