invidious/src/invidious/views/components/player.ecr

<video style="width:100%" playsinline poster="<%= thumbnail %>" title="<%= HTML.escape(video.title) %>" 
    id="player" class="video-js"
    <% if autoplay %>autoplay<% end %>
    <% if video_loop %>loop<% end %>
    <% if controls %>controls<% end %>>
    <% if hlsvp %>
        <source src="<%= hlsvp %>" type="application/x-mpegURL">
    <% else %>
        <% if listen %>
            <% audio_streams.each_with_index do |fmt, i| %>
                <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["bitrate"] %>k" selected="<%= i == 0 ? true : false %>">
            <% end %>
        <% else %>
            <% fmt_stream.each_with_index do |fmt, i| %>
                <% if preferences %>
                <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= preferences.quality == fmt["label"].split(" - ")[0] %>">
                <% else %>
                <source src="<%= fmt["url"] %>" type='<%= fmt["type"] %>' label="<%= fmt["label"] %>" selected="<%= i == 0 ? true : false %>">
                <% end %>
            <% end %>
        <% end %>

        <% preferred_captions.each_with_index do |caption, i| %>
        <track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption.name.simpleText %>"
            label="<%= caption.name.simpleText %>" <% if i == 0 %>default<% end %>>
        <% end %>

        <% captions.each do |caption| %>
        <track kind="captions" src="/api/v1/captions/<%= video.id %>?label=<%= caption.name.simpleText %>"
            label="<%= caption.name.simpleText %>">
        <% end %>
    <% end %>
</video>

<script>
var options = {
  <% if aspect_ratio %>
  aspectRatio: "<%= aspect_ratio %>",
  <% end %>
  preload: "auto",
  playbackRates: [0.5, 1, 1.5, 2],
  controlBar: {
    children: [
      "playToggle",
      "volumePanel",
      "currentTimeDisplay",
      "timeDivider",
      "durationDisplay",
      "progressControl",
      "remainingTimeDisplay",
      "captionsButton",
      "qualitySelector",
      "playbackRateMenuButton",
      "fullscreenToggle"
    ]
  }
};

var shareOptions = {
  socials: ["fb", "tw", "reddit", "mail"],

  url: "<%= host_url %>/<%= video.id %>?<%= host_params %>",
  title: "<%= video.title.dump_unquoted %>",
  description: "<%= description %>",
  image: "<%= thumbnail %>",
  embedCode: `<iframe id='ivplayer' type='text/html' width='640' height='360'
      src='<%= host_url %>/embed/<%= video.id %>?<%= host_params %>' frameborder='0'></iframe>`
};

var player = videojs("player", options, function() {
  this.hotkeys({
    volumeStep: 0.1,
    seekStep: 5,
    enableModifiersForNumbers: false,
    customKeys: {
      play: {
        key: function(e) {
          // Toggle play with K Key
          return e.which === 75;
        },
        handler: function(player, options, e) {
          if (player.paused()) {
            player.play();
          } else {
            player.pause();
          }
        }
      },
      backward: {
        key: function(e) {
          // Go backward 5 seconds
          return e.which === 74;
        },
        handler: function(player, options, e) {
          player.currentTime(player.currentTime() - 5);
        }
      },
      forward: {
        key: function(e) {
          // Go forward 5 seconds
          return e.which === 76;
        },
        handler: function(player, options, e) {
          player.currentTime(player.currentTime() + 5);
        }
      }
    }
  });
});

player.share(shareOptions);

<% if video_start > 0 || video_end > 0 %>
player.markers({
  onMarkerReached: function(marker) {
    if (marker.text === "End") {
      if (player.loop()) {
        player.markers.prev("Start");
      } else {
        player.pause();
      }
    }
  },
  markers: [
    { time: <%= video_start %>, text: "Start" },
    <% if video_end < 0 %>
    { time: <%= video.info["length_seconds"].to_f - 0.5 %>, text: "End" }
    <% else %>
    { time: <%= video_end %>, text: "End" }
    <% end %>
  ]
});

player.currentTime(<%= video_start %>);
<% end %>

<% if !listen %>
var currentSources = player.currentSources();
for (var i = 0; i < currentSources.length; i++) {
  if (player.canPlayType(currentSources[i]["type"].split(";")[0]) === "") {
    currentSources.splice(i);
    i--;
  }
}

player.src(currentSources);
<% end %>

<% if preferences %>
player.volume(<%= preferences.volume.to_f / 100 %>);
player.playbackRate(<%= preferences.speed %>);
<% end %>
</script>