Audio + Vidoe Players

audio-vidoe-players.markdown

Audio + Vidoe Players

A Pen by André Givenchy on CodePen.

License.

index.html

<div class="container">
  <h2>Audio MP3</h2>
  <audio class="js-player" controls>
    <source
      src="https://cdn-std.droplr.net/files/acc_205555/b6zl3d"
      type="audio/mp3"
    />
  </audio>
  <br />

  <br />
  <h2 style="margin:4px;">
    Video
  </h2>
  <p style="margin-top:2px; margin-bottom:32px;">
    Direct Link With support for Variable Resolution Src, Subtitles, and Video Thumbnail.
  </p>
  <video
    class="js-plyr"
    controls
    playsinline
    poster="https://cdn-sec.droplr.net/files/acc_205555/WnA7L6?response-content-disposition=inline%3B%20filename%3DSGRN_Reel_21.gif&Expires=1643713506&Key-Pair-Id=APKAJTEIOJM3LSMN33SA&Signature=gN9Dc2Pm7WmYLFlPeo8yDmJrPet4T5Q1Pja4owR57EyIhgznrwIUV2MOkqC7mKLhxqQ2A4ZVf~yw78BBT6FHI~G5xV7JVN0PwHz86PR5aYnANU-lLruMC-52HKM9A6RmPdOvVOUH7xRLCxERFqpwDwrvZGbP73zs3l7qvbYbAlE_"
    src="https://cdn.muse.ai/w/1d4a989fd380f39f6941e2d3236f29a26058ee044e6a72e9a7a61df38b4d4bd3/videos/video.mp4"
  >
    <source
      src="https://cdn.muse.ai/w/1d4a989fd380f39f6941e2d3236f29a26058ee044e6a72e9a7a61df38b4d4bd3/videos/video.mp4"
      type="video/mp4"
      size="480"
    />
    <source
      src="https://cdn.muse.ai/w/1d4a989fd380f39f6941e2d3236f29a26058ee044e6a72e9a7a61df38b4d4bd3/videos/video-720p.mp4"
      type="video/mp4"
      size="720"
    />
    <source
      src="https://cdn.muse.ai/w/1d4a989fd380f39f6941e2d3236f29a26058ee044e6a72e9a7a61df38b4d4bd3/videos/video-1080p.mp4"
      type="video/mp4"
      size="1080"
    />

    <track
      kind="captions"
      label="Français"
      srclang="fr"
      src="" /* Add url to French subtitles here */
    />
    <track
      kind="captions"
      label="English"
      srclang="en"
      src="" /* Add url to English subtitles here */
      default
    />
    <track
      kind="captions"
      label="Español"
      srclang="es"
      src="" /* Add url to Spanish subtitles here */
    />
  </video>
</div>

scripts

<script src="https://cdn.plyr.io/3.4.7/plyr.js"></script>

sg_player.css

  html,
  input,
  button {
    font-family: Google Sans, sans-serif;
  }
  .container {
    max-width: 800px;
    margin: 0 auto;
  }
  .js-plyr,
  .post,
  .post-content {
    max-width: 100%;
  }
  .js-plyr,
  .plyr__control--overlaid svg,
  article pre {
    display: block;
  }
  .plyr__control--overlaid {
    padding: 1.5rem;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
  }
  .plyr--video .plyr__control.plyr__tab-focus,
  .plyr--video .plyr__control:hover,
  .plyr--video .plyr__control[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, 0.6);
  }
  .plyr__menu__container
    .plyr__control[role="menuitemradio"][aria-checked="true"]::before {
    background: #aab74d;
  }
  .plyr--video .plyr__control.plyr__tab-focus {
    box-shadow: 0 0 0 2px rgba(156, 136, 255, 0.5);
    outline: 0;
  }
  .plyr__control.plyr__tab-focus {
    box-shadow: 0 0 0 2px rgba(156, 136, 255, 0.5);
    outline: 0;
  }
  .plyr--video .plyr__controls {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  }
  .plyr--audio .plyr__control.plyr__tab-focus,
  .plyr--audio .plyr__control:hover,
  .plyr--audio .plyr__control[aria-expanded="true"],
  .plyr--video .plyr__controls .plyr__control.plyr__tab-focus,
  .plyr--video .plyr__controls .plyr__control:hover,
  .plyr--video .plyr__controls .plyr__control[aria-expanded="true"],
  .plyr__menu__container
    label.plyr__control
    input[type="radio"]:checked
    + span {
    background-color: #101010;
    opacity: 100%;
    border-radius: 100px;
  }
  .plyr--full-ui input[type="range"] {
    color: #151EF4;
  }
  .plyr__poster {
    background-size: cover;
  }
  .plyr__control--overlaid:focus,
  .plyr__control--overlaid:hover {
    background: #FFFFFF;
  }
  .plyr-ratio .plyr__video-wrapper {
    padding-bottom: 56.25%;
    height: 0;
  }
  .plyr-ratio .plyr__video-wrapper video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
  .plyr__menu__container .plyr__control {
    font-size: 14px;
    font-family: Google Sans, sans-serif;
    font-weight: 500;
    line-height: 1.5;
  }
  .plyr__menu__container ul,
  .plyr__menu__container ul li {
    margin: 0;
    list-style: none;
  }
  .plyr--audio .plyr__controls {
    border: 1px solid #101010;
    border-radius:100px !important;
  }
</style>

sg_player.js

  /*<![CDATA[*/
  const players = Array.from(document.querySelectorAll(".js-player")).map(
    (p) => new Plyr(p)
  );
  const plyrs = Array.from(document.querySelectorAll(".js-plyr")).map(
    (plyrs) => new Plyr(plyrs)
  );
  /*]]>*/

styles

<link href="https://cdn.plyr.io/3.4.7/plyr.css" rel="stylesheet" />